[英]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)
所以我有这个应用程序，我点击按钮，嵌套的 div 出现在最里面的 div 中，并带有一个图像。 textarea 跟踪按钮被点击的次数，每次点击时嵌套的 div 都会保留，但图像在初始图像和第二个图像之间交换。
现在在第一次点击时一切都是正确的：嵌套的 div 在第一次点击时出现，第一个图像在 div 中，并且计数器更新。 之后的每次点击：嵌套的 div 保留并且不重复哪个是正确的，计数器更新哪个是正确的，图像在偶数和奇数点击之间交替，但它们都被添加到彼此旁边。 我需要的是让它们相互交换/替换。
Idk 如果我需要重做我的 addbutterfly 功能，以便他们不只是继续添加和添加，而是只添加 1 个图像，具体取决于来自 textarea 的点击值
我的另一个想法是添加一个函数来删除图像，如果偶数或奇数，同时添加相反的偶数或奇数。
任何帮助表示赞赏
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>
珍视于此。 这是最后一步
您不需要继续添加图像而只需更改源
我也改为 addEventListener 和 querySelector 因为它更优雅
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>
如何为图像添加值？ 我只能在单击时分配一个值
[英]How to add a value to a image? I can only assign a value when i click on it
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.