javascript - ClassName 与 Id - Javascript 函数

标签 javascript dom

如果这看起来非常基本,请提前道歉。

我很困惑为什么会这样:

<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 元素会在控制台中生成以下错误:

Uncaught TypeError: myButton.addEventListener is not a function

已经四处搜寻,但似乎找不到任何明确的答案。

谢谢!

最佳答案

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

尝试:

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

关于javascript - ClassName 与 Id - Javascript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45465615/

相关文章:

javascript - 如果 EventListener 已经存在,如何重用它? [纯 JavaScript]

java - 使用Java解析xml

javascript - 如何使用 JavaScript 按类删除 div

javascript - 无法将 DOM 元素附加到 DIV 节点 : Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node'

javascript - 如何将导航添加到模态

javascript - 在 Node.js 中使用 TypeScript 异步等待

javascript - 在没有对应 'Async' 语法的情况下定义 'Await' 函数的示例

javascript - SharePoint TextField ClientID 更改?

javascript - Coldfusion 使用 ajax 使用下拉选择填充表单

javascript - jquery 附加 div onclick 第一次不起作用