Javascript onclick 函数与 if 和 else 不按预期方式工作

Question

我正在尝试在我的 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>

这是 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>

我知道这可能不是最好的做事方式，但这是我第一次尝试使用 Javascript/HTML。为了测试目的，我一直试图做的是连续三次点击 Cheap table X800，然后按照程序的逻辑，它应该做的是在第一次点击时显示产品描述，在第二个上关闭它，然后在第三个上再次打开它。但是，当我尝试执行此操作时，前两次点击按预期工作，但第三次点击 - 从我得到的警报中 - 调用 myFunctionOne，进入 if 语句，执行所有内容，进入 else 语句并执行也有一些代码。这只有在页面上的脚本停止运行的警报时才可见，否则第三次点击似乎什么都不做。我该如何解决这个问题？

Answer 1

您正在尝试的是在一个段落内连接一个列表，然后在运行时间再次拆分它，这不是隐藏和显示 dom 元素的最佳方式，而且语义上不正确，因为在 HTML specification. The following example is a cleaner way to achieve the results you are looking (try it here https://jsfiddle.net/p8gkvtkj/) 的段落中有一个列表是无效的):

CSS:

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

JS:

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

HTML:

<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>

Answer 2

这显然不是完成您想要做的事情的最佳方式。但是要回答你为什么它不起作用的直接问题：当你将每个下拉菜单重置为原始时，使用

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

等而不是

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

您最终所做的是在原件中创建一个段落标签，而不是替换它。这就是 .innerHTML 在现实中的工作方式。

Answer 3

Diego 的回答非常简洁高效，但是当他发布时，我正在研究另一个解决方案，它不如 Diego 的好，但可能有一些说明性的好处：

<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>

Javascript onclick 函数与 if 和 else 不按预期方式工作

Javascript onclick function with if and else not working the way its supposed to

html

javascript

if-statement

boolean

onclick