I've searched this problem of mine and found some solutions but there is something wrong I must be doing because it doesn't work. I would like to, simply, just press a button and make an image appear in a certain div. Later, I'd like to add more buttons and each button will correspond to an image changing this image in the same div.
My code is this:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<button id="button1">Button 1</button><button id="button2">Button 2</button></br>
<button id="button3">Button 3</button><button id="button4">Button 2</button></br>
<p> </p>
<div id="1"></div>
<div id="2"></div>
<script type="text/javascript">
document.getElementById("button1").onclick=function() {
document.getElementById("1").appendChild="<img id="image1" src="img/image1.png" />;
}
document.getElementById("button2").onclick=function() {
document.getElementById("1").appendChild="<img id="image2" src="img/image2.png" />;
}
document.getElementById("button3").onclick=function() {
document.getElementById("2").appendChild="<img id="image3" src="img/image3.png" />;
}
document.getElementById("button2").onclick=function() {
document.getElementById("2").appendChild="<img id="image4" src="img/image4.png" />;
}
</script>
</body>
</html>
but somehow I cannot meke this work.
Aucun commentaire:
Enregistrer un commentaire