We Keep Coding

Refresh Image Based on User Input in HTML Form

I have a series of visualizations that are loaded via JSON files. I've created a form in HTML that allows the user to select the image they want to see:
<form action="#">
<fieldset>
<label for="selector"><b>Select a visualization</b></label>
<select name="selector" id="selector">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</fieldset>
</form>
The visualization is loaded with JavaScript as such:
var s = document.getElementsByName('selector')[0];
var text = s.options[s.selectedIndex].value;
var imageURL = "viz/" + text + ".json";
var spec = imageURL;
I've got the site set up so that the visualizations will change if I manually refresh the page, but how do I get the visualization to automatically refresh based on the user changing their selection in the form?

Put your visualization load logic to onchange event of #selector:
<select name="selector" id="selector" onchange="changeVisualization()">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
function changeVisualization(){
var s = document.getElementsByName('selector')[0];
var text = s.options[s.selectedIndex].value;
var imageURL = "viz/" + text + ".json";
var spec = imageURL;
}

you can use onchange on javascript. it will automatically appear without refreshing the page
<input type='file' name='file' accept="image/*" onchange="loadFile(event)" value = "logo1.png" />
<center>
<img src="logo1.png" id="output" width="310" align = "center">
</center>
</div>
Javascript:
<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>

How do I set an image to display from a dropdown menu option?

I'm trying to make a form that displays a movie poster when you select which movie you'd like to see. I wrote a function but I'm new to javascript and something isn't working correctly.
Thanks for any help provided.
JS
function setMovie() {
var img = document.getElementById("movimg");
var value = img.options[img.selectedIndex].value;
var selected = document.getElementById("selectedMovie");
selected.src = this.value;
return false;
}
document.getElementById("movieList").onChange = setMovie();
HTML
<select id="movimg" onChange="setMovie(this)">
<option value="null.png">Select a movie!</option>
<option value="bvs.jpg">Batman vs. Superman</option>
<option value="tjb.jpg">The Jungle Book</option>
<option value="tgf.jpg">The Godfather</option>
<option value="tpb.jpg">The Princess Bride</option>
<br>
</select>
<img src="" id="selectedMovie" />

You were referencing movieList, an id that wasn't there. You also did not need to return false in your function.
var select_box = document.getElementById("movimg"),
image_box = document.getElementById("selectedMovie");
function setMovie() {
var value = select_box.options[select_box.selectedIndex].value;
image_box.src = this.value;
}
select_box.addEventListener("change", setMovie);
<select id="movimg">
<option value="null.png">Select a movie!</option>
<option value="bvs.jpg">Batman vs. Superman</option>
<option value="tjb.jpg">The Jungle Book</option>
<option value="tgf.jpg">The Godfather</option>
<option value="tpb.jpg">The Princess Bride</option>
</select>
<img src="" id="selectedMovie"/>

You can just change your function to this:
function setMovie(){
document.getElementById("selectedMovie").src = document.getElementById("movimg").value;
}

Selecting a dropdown choice and having different images appear (using Javascript)

I am trying to have different images come up after selecting an option from a dropdown. I know it's probably very basic, but I am very new to HTML and Javascript. Not sure where or why the code isn't producing the correct output. Thanks!
<script type = "text/javascript">
function displayImage(elem) {
var img = document.getElementById("dessert");
image.src = elem.value;
}
</script>
<form name="controls">
<select name="dessertchoice" onchange="displayImage(this);">
<option value="">None</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/chocolate.jpg">Chocolate</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/icecream.jpg">Ice Cream</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/fruit.jpg">Fruit</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/brule.jpg">Creme Brulee</option>
</select>
</br></br>
<td>
<img id="dessert" src="" style="width:300px;height:200px;"/>
</td></tr>
</form>

it's just a simple typo, happens to the best of us :)
Change this image.src = elem.value; to img.src = elem.value;
Here is the working example: http://jsbin.com/jamixipiza/1/edit?html,output
Hope that helps!

Try substituting img for image within displayImage
<script type = "text/javascript">
function displayImage(elem) {
var img = document.getElementById("dessert");
img.src = elem.value;
}
</script>
<form name="controls">
<select name="dessertchoice" onchange="displayImage(this);">
<option value="">None</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/chocolate.jpg">Chocolate</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/icecream.jpg">Ice Cream</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/fruit.jpg">Fruit</option>
<option value="http://web.ics.purdue.edu/~lrourk/IE332/brule.jpg">Creme Brulee</option>
</select>
</br></br>
<td>
<img id="dessert" src="" style="width:300px;height:200px;"/>
</td></tr>
</form>

Javascript show PNG image

I found this script online. ITs almost what I need. Take a look:
<script type="text/javascript">
imageArray = new Array("NOimglink", "imglink", "imglink", "imglink");
altArray = new Array("", "Red Star", "Yellow Star", "Pink Star");
function show() {
var Index = document.menuForm.select1.options[document.menuForm.select1.selectedIndex].value;
var text = document.getElementById('select1').options[document.getElementById('select1').selectedIndex].text;
document.testStar.src = imageArray[Index];
document.testStar.alt = altArray[Index];
document.getElementById("item").innerHTML = document.getElementById("select1").value;
}
</script>
<div id="item"></div>
<form action="../action/return.html" method="post" id="menuForm" name="menuForm">
<select id="select1" onchange="show()" name="select1">
<option value="0" selected="selected">Choose a color</option>
<option value="1">Red Star</option>
<option value="2">Yellow Star</option>
<option value="3">Pink Star</option>
</select>
<img id="testStar" height="35" alt="red star" src="" width="35" border="0" name="testStar">
Anyways, is there any other way than using all the array lines? The imageArray and altArray? I have over 50 select options but the array is too much. Any easier way?

1.) Don't use innerHTML, it's a proprietary Microsoft JScript method. No, because some low-brow decided to grandfather it in to a standard does not mean anyone should use it. XHTML and even regular HTML is not text, it's syntax. So when you later reference an element it may or may not be there because you may be referencing the DOM or you may be referencing nothing because what you thought was code was dumped as a bunch of text.
2.) Revised after you clarified your question.
Save as example.xhtml and make sure that you are using images with those variable names or you change the variable names in the code to the names of the images you are testing with.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Dynamic JavaScript Image Generation</title>
<script type="application/javascript">
//<![CDATA[
function change_image()
{
var se = document.getElementById('select_image');
var img_src = se.options[se.selectedIndex].value;
var img_alt = se.options[se.selectedIndex].text;
var img = document.getElementById('img_target');
img.alt=img_alt;
img.src=img_alt+'.png';
}
//]]>
</script>
</head>
<body>
<form action="" method="get">
<fieldset>
<label for="select_image">Select an Image</label>
<select id="select_image" onchange="change_image();">
<option value="img0">Image 0</option>
<option value="img1">Image 1</option>
<option value="img2">Image 2</option>
<option value="img3">Image 3</option>
<option value="img4">Image 4</option>
<option value="img5">Image 5</option>
</select>
</fieldset>
</form>
<div><img alt="" id="img_target" src="img0.png" /></div>
</body>
</html>

If you want to avoid all arrays, you need to modify your HTML a bit. The array serves as a key-val lookup and without that you need to set the val in the previous val spot. That is to say, make your option values equal to the image src as so:
<option value="" selected="selected">Choose a color</option>
<option value="imgLink.png">Red Star</option>
<option value="imgLink2.png">Yellow Star</option>
<option value="img3.jpg">Pink Star</option>
Now it's a simple matter of setting the option value to the new src, and using the option text as the alt text.
function show() {
var elemSel = document.getElementById('select1'),
testStar = document.getElementById("testStar"),
newSrc = elemSel.options[ elemSel.selectedIndex ].value,
newAlt = elemSel.options[ elemSel.selectedIndex ].text;
testStar.src = newSrc;
testStar.alt = newAlt;
document.getElementById("item").innerHTML = "Src: "+newSrc+" |Alt: "+newAlt;
}
http://jsfiddle.net/daCrosby/JkhxP/1/
Edit
If you don't want the file extension in the value, just remove it:
<option value="" selected="selected">Choose a color</option>
<option value="imgLink">Red Star</option>
<option value="imgLink2">Yellow Star</option>
<option value="img3">Pink Star</option>
And if you want the full link for the new src, just add it:
var elemSel = document.getElementById('select1'),
newSrc = elemSel.options[ elemSel.selectedIndex ].value;
newSrc = "example.com/img/" + newSrc + ".png";
http://jsfiddle.net/daCrosby/JkhxP/2/

Change image using multiple select and javascript

I need to change the image on my website using 2 select for colour and size.
e.g. If I choose the option "Red" under the colour select, and then I choose the option "Small" under the size select, the image should be "small_red.png".
Similarly, if I choose red and large, then the image should be "red_large.png"
Thus far, I only know how to do it for 1 select, but not multiple select.
Here's my html:
<img id="imageToSwap" src="img/red.png">
<select id="colour" onChange="swapImage()">
<option value="img/red.png">Red</option>
<option value="img/green.png">Green</option>
</select>
Here's my javascript:
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var change = document.getElementById("colour");
image.src = change.value;
};
</script>

var
img = document.getElementById('imageToSwap'),
colour = document.getElementById('colour'),
size = document.getElementById('size'),
change;
change = function (evt) {
img.src = ['img/', size.value, '_', colour.value, '.png'].join('');
};
colour.addEventListener('change', change, false);
size.addEventListener('change', change, false);
with:
<img id="imageToSwap">
<select id="colour">
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<select id="size">
<option value="small">Small</option>
<option value="big">Big</option>
</select>
demo: http://jsbin.com/iwezad/2/
though, using jQuery this could be shortend a lot, and you'd get rid of some browser quirks regarding addEventListener.
jQuery version:
$('#colour, #size').on('change', function() {
$('#imageToSwap').prop('src',
['img/', $('#size').val(), '_', $('#colour').val(), '.jpg'].join('')
);
});

You can always concatenate values from selects.
<img id="imageToSwap" src="img/red.png">
<select id="colour" onChange="swapImage()">
<option value="red.png">Red</option>
<option value="green.png">Green</option>
</select>
<select id="size" onChange="swapImage()">
<option value="small">Small</option>
<option value="large">Large</option>
</select>
And in script:
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var color = document.getElementById("colour").value;
var size = document.getElementById("size").value;
image.src = "img/" + size + "_" + color;
};
</script>

<img id="imageToSwap" >
<select id="colour" onchange="swapImage()">
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<select id="size" onchange="swapImage()">
<option value="small">Small</option>`
<option value="large">Large</option>
</select>
Javascript code:
<script type="text/javascript" language="javascript">
function swapImage() {
var image = document.getElementById("imageToSwap");
var color = document.getElementById("colour").value;
var size = document.getElementById("size").value;
var imagename = size + '_' + color + '.png';
image.src = "img/" + imagename;
}
</script>