Question

如果这看起来超级基本，请提前道歉。

我很困惑为什么会这样做：

<div id="box">Hello World</div>
<button id="myButton">Click</button>

<script>
    let myBox = document.getElementById('box');
    let myButton = document.getElementById('myButton');

    myFunction = () => {                        
        myBox.innerHTML = 'Thanks';  
    }

    myButton.addEventListener("click", myFunction);
</script>

但这不是：

<div class="box">Hello World</div>
<button class="myButton">Click</button>

<script>
    let myBox = document.getElementsByClassName('box');
    let myButton = document.getElementsByClassName('myButton');

    myFunction = () => {                        
        myBox.innerHTML = 'Thanks';  
    }

    myButton.addEventListener("click", myFunction);
</script>

第二个，它按类名而不是Id获取DOM元素，在控制台中生成以下错误：

未捕获的TypeError：myButton.addEventListener不是函数

曾经四处寻找，但似乎无法找到任何明确的答案。

谢谢！

Answer 1

document.getElementsByClassName返回带有提供的类名的多个元素，而getElementById返回带有提供的id的单个元素。

尝试：

let myButton = document.getElementsByClassName('myButton')[0]; // if there is single such button

Answer 2

将代码更改为此 getElementsByClassName 返回具有指定类的所有元素的列表。

你好，世界

        <button class="myButton">Click</button>

        <script>
            let myBox = document.getElementsByClassName('box')[0];
            let myButton = document.getElementsByClassName('myButton')[0];

            myFunction = () => {                        
                myBox.innerHTML = 'Thanks';  
            }

            myButton.addEventListener("click", myFunction);
        </script>

ClassName vs Id - Javascript函数

2 个答案: