How can i replace an image with a click count value instead of add an image with a click count value? (remove image + add new image)
Question
So I have this application where I click the button and nested divs appear with an image in the inner most div. the textarea keeps track of how many times the button is clicked and with every click the nested divs remain but the image swaps between the initial image and a second image.
Right now on the first click everything thing is correct: the nested divs appear on the first click, the first image is in the divs, and the counter updates. With every click after that: the nested divs remain and do not duplicate which is correct, the counter updates which is correct, the images alternate between even and odd clicks but they all get added next to eachother. what i need is for them to be swapped/replaced by one another.
Idk if i need to redo my addbutterfly function so that they dont just keep adding and adding but only add 1 image depending on the value of clicks from the textarea
another thought i had was adding a function to remove the image if even or if odd while adding the opposite if even or odd.
any help is appreciated
var i = 0; function runTogether1() { const value = parseInt(document.getElementById('id1').value, 10); if (isNaN(value)) { addDiv(); addDiv2(); addDiv3(); addbutterfly(); incrementValue(); } else{ addbutterfly(); incrementValue(); } } function addDiv() { var div1 = document.createElement('div'); div1.classList.add('div1'); document.body.appendChild(div1); } function addDiv2() { var div2 = document.createElement('div'); div2.classList.add('div2'); document.getElementsByClassName("div1")[i].appendChild(div2); } function addDiv3() { var div3 = document.createElement('div'); div3.classList.add('div3'); document.getElementsByClassName("div2")[i].appendChild(div3); } function addbutterfly() { var img = document.createElement('img'); // Get the value of the "textfield" const value = parseInt(document.getElementById('id1').value, 10); // If the value is even, add "bfly2.gif", otherwhise add "bfly1.gif" img.src = value % 2 === 0 ? "bfly2.gif" : "bfly1.gif"; document.getElementsByClassName("div3")[0].appendChild(img); } function incrementValue() { var value = parseInt(document.getElementById('id1').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('id1').value = value; }
.div1 { background-color: red; margin: 1em; height: 500px; width: 500px; justify-content: center; align-items: center; } .div2 { background-color: yellow; height: 300px; width: 300px; } .div3 { background-color: limegreen; height: 150px; width: 150px; } div { display: flex; justify-content: center; align-items: center; position: relative; } <html> <head> <meta charset="utf-8"> <script src ="bflyjs.js" defer></script> </head> <body> <div class="button"> <button onclick = "runTogether1()"> click to get nested divs </button> <textarea id ="id1"> </textarea> </div> </body> </html>
preciated in this. it is the last step
1 answers
solution1
0 ACCPTED 2020-11-07 20:00:48
You need to not keep adding the image but just change the source
I also changed to addEventListener and querySelector since it is more elegant
document.getElementById("add").addEventListener("click",function() { const value = parseInt(document.getElementById('id1').value, 10); if (isNaN(value)) { addDiv(); addDiv2(); addDiv3(); addbutterfly(); incrementValue(); } else { incrementValue(); // Get the value of the "textfield" const value = parseInt(document.getElementById('id1').value, 10); // If the value is even, add "bfly2.gif", otherwhise add "bfly1.gif" document.getElementById("bfly").src = value % 2 === 0 ? "bfly2.gif" : "bfly1.gif"; } }) function addDiv() { var div1 = document.createElement('div'); div1.classList.add('div1'); document.body.appendChild(div1); } function addDiv2() { var div2 = document.createElement('div'); div2.classList.add('div2'); document.querySelector(".div1").appendChild(div2); } function addDiv3() { var div3 = document.createElement('div'); div3.classList.add('div3'); document.querySelector(".div2").appendChild(div3); } function addbutterfly() { var img = document.createElement('img'); img.id="bfly" img.src = "bfly1.gif"; document.querySelector(".div3").appendChild(img); } function incrementValue() { var value = parseInt(document.getElementById('id1').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('id1').value = value; }
.div1 { background-color: red; margin: 1em; height: 500px; width: 500px; justify-content: center; align-items: center; } .div2 { background-color: yellow; height: 300px; width: 300px; } .div3 { background-color: limegreen; height: 150px; width: 150px; } div { display: flex; justify-content: center; align-items: center; position: relative; }
<html> <head> <meta charset="utf-8"> <script src="bflyjs.js" defer></script> </head> <body> <div class="button"> <button type="button" id="add">click to get nested divs</button> <textarea id="id1"></textarea> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.