如何用点击计数值替换图像而不是添加带有点击计数值的图像？（删除图像+添加新图像）
所以我有这个应用程序，我点击按钮，嵌套的 div 出现，最里面的 div 中带有图像。textarea 会跟踪按钮被单击的次数，并且每次单击时，嵌套的 div 都会保留，但图像会在初始图像和第二个图像之间交换。
现在，在第一次单击时，一切都是正确的：第一次单击时出现嵌套的 div，第一个图像位于 div 中，并且计数器更新。此后的每次点击：嵌套的 div 保留并且不重复（这是正确的），计数器更新（这是正确的），图像在偶数和奇数单击之间交替，但它们都被添加到彼此旁边。我需要的是让它们相互交换/替换。
我不知道我是否需要重做我的 addbutterfly 函数，这样它们就不会只是不断添加，而只会根据文本区域的点击值添加 1 个图像
我的另一个想法是添加一个函数来删除偶数或奇数的图像，同时添加相反的偶数或奇数的图像。
任何帮助表示赞赏
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;
}
qq_笑_171回答
-
桃花长相依
您不需要继续添加图像，而只需更改源我还更改为 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>
随时随地看视频慕课网APP
相关分类
JavaScript