如何修复javascript函数中的if/else语句，以便在第一次单击时运行所有函数，并且在使用值后每次单击仅运行一个函数？

因此，我有一个应用程序，我单击按钮，嵌套的div显示在最里面的div中。textarea跟踪按钮被单击的次数，每次单击嵌套的div都会保留，但图像会在初始图像和第二个图像之间交换

我只需要在第一次单击时显示嵌套的div，并在每次单击之后仅更改图像，使用文本框中的值来实现这一点，就像使用addbutterfly函数一样

在这个函数中，我从textarea中获取了值，并将其设置为如果值为偶数，则显示1图像，如果值不是偶数，则显示另一图像

我不知道如何使应用于按钮的函数工作，以便如果值等于0，则创建divs和初始图像，如果不等于0，则只运行addbutterfly函数，该函数将来回交换图像

我尝试了我能想到的最基本的方法。这是从textarea中提取值的方法，与我使用addbutterfly函数的方法相同，如果value==0，则执行所有函数，否则只执行addbutterfly函数，但它不工作

在我添加if/else语句之前，应用程序运行良好，但每次单击都会添加所有div。 这是我的错误： “消息”：“未捕获的TypeError:无法读取未定义的属性'appendChild'”， “文件名”：”https://stacksnippets.net/js", “行号”：102， “科尔诺”：45

var i=0；
函数runTogether1（）{
const value=parseInt（document.getElementById（'id1'）。value，10）；
如果（值==0）{
addDiv（）；
addDiv2（）；
addDiv3（）；
addbutterfly（）；
递增值（）；
}否则{
addbutterfly（）；
}
}
函数addDiv（）{
var div1=document.createElement（'div'）；
div1.classList.add（'div1'）；
文件.正文.附件（第1部分）；
}
函数addDiv2（）{
var div2=document.createElement（'div'）；
div2.classList.add（'div2'）；
document.getElementsByClassName（“div1”）[i].appendChild（div2）；
}
函数addDiv3（）{
var div3=document.createElement（'div'）；
div3.classList.add（'div3'）；
document.getElementsByClassName（“div2”）[i].appendChild（div3）；
}
函数addbutterfly（）{
var img=document.createElement（'img'）；
//获取“textfield”的值
const value=parseInt（document.getElementById（'id1'）。value，10）；
//如果值为偶数，则添加“bfly2.gif”，否则添加“bfly1.gif”
img.src=值%2==0？“bfly2.gif”：“bfly1.gif”；
document.getElementsByClassName（“div3”）[i].appendChild（img）；
i++；
}
函数增量值（）{
var value=parseInt（document.getElementById（'id1'）。value，10）；
值=isNaN（值）？0：值；
值++；
document.getElementById（'id1'）。value=value；
}

.div1{
背景色：红色；
边缘：1米；
高度：500px；
宽度：500px；
证明内容：中心；
对齐项目：居中；
}
.第2分部{
背景颜色：黄色；
高度：300px；
宽度：300px；
}
.第3分部{
背景色：柠檬黄；
高度：150像素；
宽度：150px；
}
div{
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}

单击以获取嵌套的div

您需要向

文本区域添加一个值，以便按ID读取值


var i=0；
函数runTogether1（）{
const value=parseInt（document.getElementById（'id1'）。value，10）；
如果（值==0）{
addDiv（）；
addDiv2（）；
addDiv3（）；
addbutterfly（）；
递增值（）；
}否则{
addbutterfly（）；
}
}
函数addDiv（）{
var div1=document.createElement（'div'）；
div1.classList.add（'div1'）；
文件.正文.附件（第1部分）；
}
函数addDiv2（）{
var div2=document.createElement（'div'）；
div2.classList.add（'div2'）；
document.getElementsByClassName（“div1”）[i].appendChild（div2）；
}
函数addDiv3（）{
var div3=document.createElement（'div'）；
div3.classList.add（'div3'）；
document.getElementsByClassName（“div2”）[i].appendChild（div3）；
}
函数addbutterfly（）{
var img=document.createElement（'img'）；
//获取“textfield”的值
const value=parseInt（document.getElementById（'id1'）。value，10）；
//如果值为偶数，则添加“bfly2.gif”，否则添加“bfly1.gif”
img.src=值%2==0？“bfly2.gif”：“bfly1.gif”；
document.getElementsByClassName（“div3”）[i].appendChild（img）；
i++；
}
函数增量值（）{
var value=parseInt（document.getElementById（'id1'）。value，10）；
值=isNaN（值）？0：值；
值++；
document.getElementById（'id1'）。value=value；
}
.div1{
背景色：红色；
边缘：1米；
高度：500px；
宽度：500px；
证明内容：中心；
对齐项目：居中；
}
.第2分部{
背景颜色：黄色；
高度：300px；
宽度：300px；
}
.第3分部{
背景色：柠檬黄；
高度：150像素；
宽度：150px；
}
div{
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}

单击以获取嵌套的div
0
parseInt（document.getElementById（'id1'）.value，10）
正在返回
NaN
，因为脚本启动时文本区域为空。因此，使用
isNaN（）
而不是与
0
进行比较，就像您在
incrementValue（）
中所做的那样


var i=0；
函数runTogether1（）{
const value=parseInt（document.getElementById（'id1'）。value，10）；
如果（isNaN（值））{
addDiv（）；
addDiv2（）；
addDiv3（）；
addbutterfly（）；
递增值（）；
}否则{
addbutterfly（）；
}
}
函数addDiv（）{
var div1=document.createElement（'div'）；
div1.classList.add（'div1'）；
文件.正文.附件（第1部分）；
}
函数addDiv2（）{
var div2=document.createElement（'div'）；
第2.1节