How does the swapImage function work in javascript?

Question

I'm working on a very simple web page where a user clicks a button and, depending on their form entry, an image changes. I cannot for the life of me get this code to work.

Here's what I have in the function code:

function swapImage()
{
var apple = document.getElementById("apple");
questionmark.src = "apple.gif";
var orange = document.getElementById("orange");
orange.src = "orange.gif";
var lemon = document.getElementById("lemon");
lemon.src = "lemon.gif";
}

Now here's what I have in the html:

Who's your favorite fruit?

(Valid choices:apple, orange, lemon)





In the page, a questionmark appears before the user enters an answer in the form. This is the area where the image changes. I don't quite understand the connection. I know my coding is wrong, but I'm not sure what I need to change.

Thanks!

Answer 1

Who's your favorite fruit?

(Valid choices: apple, orange, lemon)

Answer 2

So you would like to change 3 images when the user clicks on the text field?



Because in your code the image only changes when you click on it. :)



To change the image when somebody click on the text filed use this:







The "-s are only recommendations but some browsers may require them.



You probably know this but I write it down for reference. :)



Keep in mind that JavaScript is Case-Sensitive!



swapimage

swapImage



and SwapImage are 3 different functions!



If you need any more help feel free to mail me about it. :)



Bye!

Answer 3

NOTE: Yahoo screwed up the code I posted. To get the code, email me and I'll send it back to you. (you have emails blocked, so I can't send it to you)



Try this function instead:



function swapImage()

{

document.getElementById("questionmark").src =

document.getElementById("mychoice").value + ".gif";



}



Also, note that the way you have your HTML, the image will only change when you click the image itself, not the form button.



To get the form button to also change the image, change the button code to read: