HTML 错误:Uncaught ReferenceError at HTMLButtonElement.onclick

在本文中，让我们首先讨论引用错误，然后再来讨论 onclick 函数，接下来我们使用示例来解决问题 Uncaught ReferenceError at HTMLButtonElement.onclick，最后来讨论解决方法。

javaScript 中的 onclick 函数：

onclick 事件处理程序是 DOM 元素提供的一组属性，用于帮助管理元素对事件的反应方式。
‘target’ 表示添加/附加事件的元素。
‘functionRef’ 表示函数名或函数表达式。该函数接收一个 ‘Event’ 对象的参数。

语法：

target.on<event> = functionRef;

什么时候onclick起作用： 当用户点击一个元素时，点击事件就会发生。点击事件在鼠标在一个单独的元素上按下并释放后完成。

引用错误： 这个错误表示在当前范围内引用了一个变量或函数，但该变量或函数在javascript中不存在，通过脚本标签引用。

Message: Uncaught ReferenceError:something is not defined

示例1: 让我们来看一个示例，当HTMLButtonElement.onclick出现未捕获的ReferenceError时。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
    <button id="out" onclick="listen(this)">
          Submit
      </button>
</body>
<script>
    function listen(this) {
        this.style.backgroundColor = 'red';
        this.innerHTML = "Hii GFG , How r u???"
    }
</script>
</html>

输出：

HTML 错误:Uncaught ReferenceError at HTMLButtonElement.onclick

这里发生错误是由于这里 在函数定义期间传递 ，但在函数内部，this指的是窗口对象而不是该元素的id。所以它会产生问题，在控制台返回错误，并且程序无法给出预期的输出。

示例2： 这是解决上述在JavaScript中出现的问题的解决方案：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
    <button id="out" onclick="listen(this)">
          Submit
      </button>
</body>
<script>
    function listen(get) {
        console.log(this)
        get.style.backgroundColor = 'red';
        get.innerHTML = "Hii GFG , How r u???"
    }
</script>
</html>

输出：

HTML 错误:Uncaught ReferenceError at HTMLButtonElement.onclick