所以我有这个应用程序，我点击按钮，嵌套的 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;
}
桃花长相依
相关分类