时间戳

首页 > 解决方案 > 只有第一个按钮有效。不确定它是否是脚本。可能是我错过了一条规则

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

问题描述

我知道我是这方面的初学者，但我真的需要学习规则。我正在尝试制作一个简单的 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>

标签： javascriptbuttongetelementbyid

解决方案

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

推荐阅读