所以我有这个应用程序，我点击按钮，嵌套的 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;}
1 回答
桃花长相依
TA贡献1860条经验 获得超8个赞
您不需要继续添加图像，而只需更改源
我还更改为 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>
添加回答
举报
0/150
提交
取消