只有第一个按钮有效。不确定它是否是脚本。可能是我遗漏了一条规则

Question

我知道我是初学者，但我真的需要学习规则。我正在尝试做一个 javascript 的简单示例。它是一个带有三个按钮的盒子，但出于某种原因只有其中一个可以使用。他们确实有不同的ID类型，所以一定还有我不知道的规则。

<!DOCTYPE html>
<html>
<head>

    <title>Javascript box</title>

</head>
<body>

    <p>Press buttons to change the box</p> 

    <div id="box" style="height:100px; width:100px; background-color: limegreen; margin:50px"></div>

    <br>

    <button id="less">less</button>

    <button id="more">more</button>
    
    <button id="none">Reset</button>


    <script type="text/javascript">

        document.getElementById("less").addEventListener("click", function(){

            document.getElementById("box").style.height = "25px";
    
        });

        document.getElementByID("more").addEventListener("click", function(){

            document.getElementById("box").style.height = "150px";
            
        });
   
        document.getElementById("none").addEventListener("click", function(){

            document.getElementById("box").style.height = "100px";
            
         
        });

     </script>

</body>

</html>

Answer 1

第二个 addEventListener 有错字。在document.getElementByID中，D不应该大写。
调试这些问题的一个好方法是查看开发人员工具中的控制台。

只有第一个按钮有效。不确定它是否是脚本。可能是我遗漏了一条规则

Only first button works. Not sure if its the script. It might be I'm missing a rule

javascript

button

getelementbyid