I am looking to display the pdf of one of two distributions, depending on what the user selected:
<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.
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.