[英]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.