JavaScript Click()方法不起作用,并且控制台返回一个错误消息
在本文中,我们将看到在JavaScript中使用click()方法时出现的“ Uncaught TypeError: document.getElementsByClassName(…) .click不是一个函数 ”错误。
TypeError 是一个表示由于值不是预期类型而无法执行操作而产生的错误的对象。
方法: 首先仔细检查您是否编写了 document.getElementsByClassName 而不是document.getElementByClassName。如果拼写正确,那么可能是因为您不知道document.getElementsByClassName返回一个元素数组,而不是单个元素,才会出现此错误。为了避免错误,您需要访问单个元素,然后执行 click() 。
示例: 以下代码示例创建了上述的Uncaught TypeError,因为我们尚未访问一个单独的元素。
HTML
<!DOCTYPE html>
<html>
<head>
<script>
function btnA() {
document.getElementById('result').innerHTML =
"You've successfully clicked on the button";
}
function btnB() {
document.getElementsByClassName('active').click();
}
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Generates a TypeError</h3>
<div id="result"></div>
<button class="active"
onclick="btnA();">
Button A
</button>
<button class="trigger"
onclick="btnB();">
Button B
</button>
</body>
</html>
输出: 当我们点击B按钮时出现此错误。
Example: 这个示例通过访问一个单独的元素来解决上面的 TypeError。这段代码通过在 document.getElementsByClassName() 中指定一个单独的元素来解决上述提到的 TypeError。
HTML
<!DOCTYPE html>
<html>
<head>
<script>
function btnA() {
document.getElementById('result').innerHTML =
"You've successfully clicked on the button";
}
function btnB() {
document.getElementsByClassName('active')[0].click();
}
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Resolving a TypeError</h3>
<div id="result"></div>
<button class="active"
onclick="btnA();">
Button A
</button>
<button class="trigger"
onclick="btnB();">
Button B
</button>
</body>
</html>
输出: 现在当按钮 B 被点击时,不再显示错误信息,而是显示消息“您已成功点击了按钮”。