Method Posted November 7, 2009 Share Posted November 7, 2009 The code below displays one picture with three buttons underneath. When each button is pressed, the picture should change to the picture assigned to that button. However, only button one is working. I am assuming the problem lies within my functions, but I can't narrow it down. Any thoughts?? <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <!-- --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exercise 6.5</title> <script type = "text/javascript"> function changeimage() { document.getElementById("myImage") .src="bears.jpg"; } function changeimage1() { document.getElementById("myimage") .src="bears1.jpg"; } function changeimage2() { document.getElementById("myimage") .src="bears3.jpg"; } </script> </head> <body> <p align = center> <img id="myImage" src="bears1.jpg" /> <br /> <input type="button" onclick="changeimage()" value = "Button 1" /> <input type="button" onclick="changeimage1()" value = "Button 2" /> <input type="button" onclick="changeimage2()" value = "Button 3"/> </p> </body> </html> Quote Link to comment Share on other sites More sharing options...
Method Posted November 7, 2009 Author Share Posted November 7, 2009 Never mind. Got it figured out. The code below displays one picture with three buttons underneath. When each button is pressed, the picture should change to the picture assigned to that button. However, only button one is working. I am assuming the problem lies within my functions, but I can't narrow it down. Any thoughts?? <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <!-- --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exercise 6.5</title> <script type = "text/javascript"> function changeimage() { document.getElementById("myImage") .src="bears.jpg"; } function changeimage1() { document.getElementById("myimage") .src="bears1.jpg"; } function changeimage2() { document.getElementById("myimage") .src="bears3.jpg"; } </script> </head> <body> <p align = center> <img id="myImage" src="bears1.jpg" /> <br /> <input type="button" onclick="changeimage()" value = "Button 1" /> <input type="button" onclick="changeimage1()" value = "Button 2" /> <input type="button" onclick="changeimage2()" value = "Button 3"/> </p> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.