Question

在以下HTML / Javascript代码段中，我错过了onclick语句中的函数括号（它应显示为：onclick="showMessage()"）。

如何突出显示缺失的括号

（a）在显示页面之前在记事本中。

（b）在我显示页面后在浏览器JS控制台中？

如果除了检查之外这是不可能的，还有另一种方法可以更容易地识别这个问题吗？

<html>
<head>
    <script>
        function showMessage() {
            document.getElementById("messageArea").innerHTML = "Hello World";
        }
    </script>
</head>
<body>
    <input type="button" value="Show message" onclick="showMessage">
    <div id="messageArea">---</div>
</body>
</html>

Answer 1

问题是onclick采用任何类型的javascript表达式，函数执行就是其中之一。例如：

<script>
    var a = 10
</script>

<!--All are valid and don't throw any errors -->

<button onclick="a">Nothing happens</button> 
<button onclick="a++">Increment</button> 
<button onclick="alert(a)">Check value</button>
<button onclick="undefined">Surely Not?</button>

执行showMessage()等功能是其主要用途之一。从技术上讲，在showMessage内没有() onclick并不是错误。 showMesage只是函数定义，如果您要键入showMessage并在浏览器的控制台中按Enter键，它将只返回函数定义并且不会抛出任何错误。因此，IDE不会将其强制为错误，因为它不是错误。

Answer 2

我不知道任何会查看html属性的工具，以查找可能出现的错误。

但是，如果您将所有javascript代码移至单独的文件，则可以使用eslint之类的工具来检查常见错误。

因此，在这种情况下，您不必使用HTML中的onclick属性，而是使用javascript选择元素并添加事件监听器。

如何突出Javascript缺少括号调用函数

2 个答案: