Javascript onclick函数的if和else没有按其预期的方式工作

我正在尝试在我的HTML页面中使用javascript函数，每当你点击一个名字时，它会显示更多的文本，如果你再次点击同一个名字，它就会隐藏，或者——最终——当你点击另一个名字时，它会显示不同的文本。这是我的HTML代码：

<section>
    <p id="one" onclick="myFunctionOne()">Cheap table X800</p>
    <p id="two" onclick="myFunctionTwo()">Luxury table Z2100</p>
    <p id="three" onclick="myFunctionThree()">Chair 101</p>
</section>

廉价表X800

豪华桌Z2100

椅子101

这是Javascript：

<script>
    var oneS =  "<ul>"+"<li>ID: 200</li>"+"<li>Name: Cheap table X800</li>"+"<li>Description: This is the cheapest table you can find that still meets its goal. 4 people max.</li>"+"</ul>";
    var twoS =  "<ul>"+"<li>ID: 201</li>"+"<li>Name: Luxury table Z2100</li>"+"<li>Description: A long table, suitable for a meeting room.</li>"+"</ul>";
    var threeS =    "<ul>"+"<li>ID: 202</li>"+"<li>Name: Chair 101</li>"+"<li>Description: A very basic but functional chair.</li>"+"</ul>";
    var booleanOne=false;
    var booleanTwo=false;
    var booleanThree=false;
    function myFunctionOne() {
        //alert("outside if "+booleanOne);          
        if (!booleanOne){
            alert("inside if "+booleanOne);
                document.getElementById("one").innerHTML += oneS;
            booleanOne=true;
            alert(booleanOne);
            if (booleanTwo) myFunctionTwo();
            if (booleanThree) myFunctionThree();
            booleanOne=true;
            return;
        }
        //alert("outside else "+booleanOne);
        else if (booleanOne) {
            alert("inside else "+booleanOne);
            document.getElementById("one").innerHTML = "<p id="+"\"one\""+" onclick="+"\"myFunctionOne()\""+">Cheap table X800</p>";
            booleanOne=false;
            alert(booleanOne);
            return;
        }
    }
    function myFunctionTwo() {
        if (!booleanTwo){
                document.getElementById("two").innerHTML += twoS;
            booleanTwo=true;
            if (booleanThree) myFunctionThree();
            if (booleanOne) myFunctionOne();
        }
        else {
            document.getElementById("two").innerHTML = "<p id="+"\"two\""+" onclick="+"\"myFunctionTwo()\""+">Luxury table Z2100</p>";
            booleanTwo=false;
        }
    }
    function myFunctionThree() {
        if (!booleanThree){
                document.getElementById("three").innerHTML += threeS;
            booleanThree=true;
            if (booleanOne) myFunctionOne();
            if (booleanTwo) myFunctionTwo();
        }
        else{
            document.getElementById("three").innerHTML = "<p id="+"\"three\""+" onclick="+"\"myFunctionThree()\""+">Chair 101</p>";
            booleanThree=false;                 
        }
    }
</script>

var oneS=“
”+”
ID:200
“+”
名称：廉价表X800
“+”
说明：这是您能找到的最便宜的表，仍然满足其目标。最多4人
”+“
”；
var twoS=“
”+”
ID:201
“+”
名称：豪华桌Z2100
“+”
说明：一张长桌，适合会议室使用。
“+”
”；
var threeS=“
”+”
ID:202
“+”
名称：101号椅子
“+”
说明：一个非常基本但功能强大的椅子。
“+”
”；
var booleanne=false；
var booleanTwo=假；
var booleanThree=假；
函数myFunctionOne（）{
//警报（“外部if”+布尔ONE）；
if（！booleanOne）{
警报（“内部if”+布尔ONE）；
document.getElementById（“一”）.innerHTML+=个；
booleanne=true；
警报（booleanOne）；
if（booleanTwo）myFunctionTwo（）；
if（booleanThree）myFunctionThree（）；
booleanne=true；
返回；
}
//警报（“外部else”+布尔ONE）；
else if（booleanOne）{
警报（“其他内部”+布尔一级）；
document.getElementById（“one”）.innerHTML=“
廉价表X800
”；
booleanne=false；
警报（booleanOne）；
返回；
}
}
函数myFunctionTwo（）{
如果（！booleanTwo）{
document.getElementById（“两个”）.innerHTML+=twoS；
布尔二=真；
if（booleanThree）myFunctionThree（）；
if（booleanne）myFunctionOne（）；
}
否则{
document.getElementById（“两个”）.innerHTML=“
豪华表Z2100
”；
布尔二=假；
}
}
函数myFunctionThree（）{
如果（！booleanThree）{
document.getElementById（“三”）.innerHTML+=threeS；
布尔三=真；
if（booleanne）myFunctionOne（）；
if（booleanTwo）myFunctionTwo（）；
}
否则{
document.getElementById（“three”）.innerHTML=“
椅子101
”；
布尔三=假；
}
}

我知道这可能不是最好的方法，但这是我第一次尝试使用Javascript/HTML。出于测试目的，我一直在尝试连续三次单击廉价表X800，按照程序的逻辑，它应该做的是在第一次单击时显示产品描述，在第二次单击时关闭它，然后在第三次单击时再次打开它。但是，当我尝试这样做时，前两次单击按预期工作，但第三次单击（由于警报，我得到的结果）调用myFunctionOne，进入if语句，执行所有操作，进入else语句，并执行这段代码。这只有在页面上的警报暂停脚本时才可见，否则第三次单击似乎没有任何作用。

---

如何修复此问题？

您尝试的是将一个列表连接到一个段落中，然后在运行时再次拆分它，这不是隐藏和显示dom元素的最佳方式，而且在语义上也不正确，因为在段落中包含一个列表是无效的。下面的示例是一种更简洁的方法，可以实现您想要的结果（请在此处尝试）：

CSS:

JS:

HTML:

廉价表X800


身份证号码：201
名称：廉价表X800
描述：这是您能找到的最便宜的表，仍然满足其目标。最多4人

豪华桌Z2100


身份证号码：202
名称：豪华桌Z2100
描述：这是您能找到的最便宜的表，仍然满足其目标。最多4人

主席101


身份证号码：203
姓名：101号主席
描述：这是您能找到的最便宜的表，仍然满足其目标。最多4人

您尝试的是将一个列表连接到一个段落中，然后在运行时再次拆分它，这不是隐藏和显示dom元素的最佳方式，而且在语义上也是不正确的，因为在页面上的段落中包含一个列表是无效的。下面的示例是一种更简洁的方法，可以实现您想要的结果（请在此处尝试）：

CSS:

JS:

HTML:

廉价表X800


身份证号码：201
名称：廉价表X800
描述：这是您能找到的最便宜的表，仍然满足其目标。最多4人

豪华桌Z2100


身份证号码：202
名称：豪华桌Z2100
描述：这是您能找到的最便宜的表，仍然满足其目标。最多4人

主席101


身份证号码：203
姓名：101号主席
描述：这是您能找到的最便宜的表，仍然满足其目标。最多4人

这显然不是做你正在尝试的事情的最佳方式

#moreInfo1, #moreInfo2, #moreInfo3 {
 display: none;
}

function showOrHideMore(id) {
    if(document.getElementById(id).style.display==='none'){
      document.getElementById(id).style.display = 'block'
    } else {
      document.getElementById(id).style.display = 'none'
    }
}

<section>
<div onclick="showOrHideMore('moreInfo1')"><p>Cheap table X800</p>
    <ul id="moreInfo1">
            <li>ID: 201</li>
            <li>Name: Cheap table X800</li>
            <li>Description: This is the cheapest table you can find that still meets its goal. 4 people max.</li>
    </ul>
</div>
<div onclick="showOrHideMore('moreInfo2')"><p>Luxury table Z2100</p>
    <ul id="moreInfo2">
            <li>ID: 202</li>
            <li>Name: Luxury table Z2100</li>
            <li>Description: This is the cheapest table you can find that still meets its goal. 4 people max.</li>
    </ul>
</div>
    <div onclick="showOrHideMore('moreInfo3')"><p>Chair 101</p>
    <ul id="moreInfo3">
            <li>ID: 203</li>
            <li>Name: Chair 101</li>
            <li>Description: This is the cheapest table you can find that still meets its goal. 4 people max.</li>
    </ul>
</div>
</section>

document.getElementById("one").innerHTML = "Cheap table X800";

document.getElementById("one").innerHTML = "<p id="+"\"one\""+" onclick="+"\"myFunctionOne()\""+">Cheap table X800</p>";

<html>
    <body>
        <section>
            <p id="one" onclick="mainFunc('one')">Cheap table X800</p>
            <ul id="oneList" style="display: none;">
                <li>ID: 200</li>
                <li>Name: Cheap table X800</li>
                <li>Description: This is the cheapest table you can find that still meets its goal. 4 people max.</li>
            </ul>
            <p id="two" onclick="mainFunc('two')">Luxury table Z2100</p>
            <ul id="twoList" style="display: none;">
                <li>ID: 201</li>
                <li>Name: Luxury table Z2100</li>
                <li>Description: A long table, suitable for a meeting room.</li>
            </ul>
            <p id="three" onclick="mainFunc('three')">Chair 101</p>
            <ul id="threeList" style="display: none;">
                <li>ID: 202</li>
                <li>Name: Chair 101</li>
                <li>Description: A very basic but functional chair.</li>
            </ul>
        </section>
        <script>
            function mainFunc(arg) {
                myFunctionOne(arg);
                myFunctionTwo(arg);
                myFunctionThree(arg);
            }
            function myFunctionOne(arg) {
                var list = document.getElementById('oneList');

                if ('one' == arg && list.style.display == 'none'){
                    list.style.display = 'block';
                }
                else {
                    list.style.display = 'none';
                }
            }
            function myFunctionTwo(arg) {
                var list = document.getElementById('twoList');

                if ('two' == arg && list.style.display == 'none'){
                    list.style.display = 'block';
                }
                else {
                    list.style.display = 'none';
                }
            }
            function myFunctionThree(arg) {
                var list = document.getElementById('threeList');

                if ('three' == arg && list.style.display == 'none'){
                    list.style.display = 'block';
                }
                else {
                    list.style.display = 'none';
                }
            }
        </script>
    </body>
</html>