i trying create webpage user clicks button , page displays images saved in array.when run code, displays source of images, not images. tips on doing wrong? in advance
<!doctype html> <html> <body> <h1>slideshow</h1> <p>holiday slideshow</p> <button type="button" onclick="beginshow()">view slideshow</button> <p id="p1"><img id="pic1" src="./assets/pic1.jpg"> click on "view slideshow". click display slideshow</p> <script> var list = [ "/assets/pic1.jpg", "/assets/pic2.jpg", "./assets/pic3.jpg", "./assets/pic4.jpg" ]; var index = 0; function beginshow() { settimeout(mytimeout1, 2000) settimeout(mytimeout2, 4000) settimeout(mytimeout3, 6000) settimeout(mytimeout4, 8000) } function mytimeout1() { document.getelementbyid("p1").innerhtml = list[0]; } function mytimeout2() { document.getelementbyid("p1").innerhtml = list[1]; } function mytimeout3() { document.getelementbyid("p1").innerhtml = list[2]; } function mytimeout4() { document.getelementbyid("p1").innerhtml = list[3]; } </script> </body> </html>
if going way have change assign innerhtml:
document.getelementbyid("p1").innerhtml = '<img src=' + list[0] + '>; but recommend rather change src attribute of image list[0]:
document.getelementbyid('pic1').setattribute('src', list[0]); 
Comments
Post a Comment