Javascript: displaying images with onchange event


 
Thread Tools Search this Thread
Top Forums Programming Javascript: displaying images with onchange event
# 1  
Old 11-17-2014
Javascript: displaying images with onchange event

I am looking to display the pdf of one of two distributions, depending on what the user selected:

Code:
<script type="text/javascript">
function distributionChange() {
  var img = document.createElement("img");
  var link = 'http://en.wikipedia.org/wiki/xxx#mediaviewer/File:yyy';

  switch (document.getElementById("distributions").value) {
    case 'normal':
      img.src = link.replace("xxx", "Normal_distribution").replace("yyy", "Normal_Distribution_PDF.svg");
      break;
    case 'lognormal':
      img.src = link.replace("xxx", "Log-normal_distribution").replace("yyy", "Some_log-normal_distributions.svg");
      break;
    default:
      img.src = "Distribution not specified.";
  }

  img.setAttribute("width", "320");
  document.getElementById("distribution").appendChild(img);
}
</script>

<select id='distributions' onChange='distributionChange()'>
<option name='option0' value='normal'>normal</option>
<option name='option1' value='lognormal'>lognormal</option>
</select>

<div id="distribution"></div>

Two questions on this:
1- Why are the images appended and not recreated? Rather than overwriting the previous image, the new image is shown next to the old one.
2- Why is the image not actually shown? When doing Ctrl-Shift-J in my browser, the link to the image is correct.
# 2  
Old 11-17-2014
Its due to appendChild, just replace src, validate before append whether div already exists or not

Code:
// Exists alredy then just replace src
if(document.getElementById('YourImagediv')){

  document.getElementById('YourImagediv').src = 'someimage'

}
else{

// create img div and append somewhere

}

OR

remove div before creating something like this

Code:
document.getElementById("some-element").remove()

---------- Post updated at 02:26 AM ---------- Previous update was at 02:02 AM ----------

Modify like this

Code:
function distributionChange() {
var img ;
if(document.getElementById("test"))
{
      img = document.getElementById("test")
}else
{
      img = document.createElement("img");
      img.id = "test"
      img.setAttribute("width", "320");
  document.getElementById("distribution").appendChild(img);
}

  var link = 'http://en.wikipedia.org/wiki/xxx#mediaviewer/File:yyy';

  switch (document.getElementById("distributions").value) 
  {
    case 'normal':
      img.src = link.replace("xxx", "Normal_distribution").replace("yyy", "Normal_Distribution_PDF.svg");
      break;
    case 'lognormal':
      img.src = link.replace("xxx", "Log-normal_distribution").replace("yyy", "Some_log-normal_distributions.svg");
      break;
    default:
      img.src = "Distribution not specified.";
  }

	
}

This link may be helpful Can I use... Support tables for HTML5, CSS3, etc
# 3  
Old 11-17-2014
I dont understand this solution. You are declaring an object test that is not actually used for display purposes. This looks very hackish to me:
Code:
img = document.getElementById("test")

# 4  
Old 11-17-2014
Quote:
Originally Posted by figaro
I dont understand this solution. You are declaring an object test that is not actually used for display purposes. This looks very hackish to me:
Code:
img = document.getElementById("test")


I just added attribute id while creating img element for easy access, I have checked for img element with id test, if it doesn't exist already in body, then create img element append to div distribution, else meaning img element with id test, already exists so we don't have to create again, so just access element where id is "test" img = document.getElementById("test"), and change attribute src inside the switch statement. First you try with pictures other than svg ( png, jpeg ), you will be able to view changes, as and when there is a change in dropdown. You will understand better if you could use some debug tool like firebug etc.

Thanks
# 5  
Old 11-18-2014
Thank you again for your response. SVG format is supported and I am using Ctrl-Shift-J as a surrogate for Firebug.
Login or Register to Ask a Question

Previous Thread | Next Thread

3 More Discussions You Might Find Interesting

1. Shell Programming and Scripting

Bash Script to find/sort/move images/duplicate images from USB drive

Ultimately, I'm looking to create a script that allows me to plug in a usb drive with lots of jpegs on it & copy them over to a folder on my hard drive. So in the process of copying I am looking to hash check them, record dupes to a file, copy only 1 of the identical files (if it doesn't exsist... (1 Reply)
Discussion started by: JonaQuinn
1 Replies

2. UNIX for Dummies Questions & Answers

onChange + javascript in perl CGI - question

Hello all, Am trying to include a onChange java script to my perl CGI application which uses POST method to upload files to file_server This is how I embedded javascript in the perl code that renders CGI application print qq| <script type="text/javascript" src="display.js"> </script>... (4 Replies)
Discussion started by: matrixmadhan
4 Replies

3. AIX

where to get .bm or .pm images

I'm just trying to get a personal picture for a backdrop on my AIX user account at work. Where does one acquire the .bm or .pm files. How do I create them as an unpriveledged user? There are quite a few jpeg's that I would like to use. (0 Replies)
Discussion started by: trigggl
0 Replies
Login or Register to Ask a Question