Question

请考虑以下代码：

<html>

<head>
</head>

<body>
    <script>
        function showAlert (text) {
            alert(text);
        }

        x = document.getElementById('aTag');
        x.setAttribute('onclick', "alert('Hello World')"); //WORKS
        x.setAttribute('onclick', "showAlert('Hello World')"); //DNW (showAlert is not defined)
    </script>

    <table>
        <tr>
            <td><a href="javascript:void(0)" id="aTag">TEST</a></td>
        </tr>
    </table>
</body>

</html>

第一个onclick分配工作并生成一个超链接，当您单击它时，会打开一个包含Hello World消息的对话框。可能是因为window.alert方法全球（我不知道它是否是正确的词）。

但是第二个赋值仅在单击时返回以下错误：

showAlert is not defined

作为JS的初学者，我认为问题可能是showAlert函数范围或elementNode.setAttribute函数不存在的showAlert方法上下文。

我提前感谢你们所有的时间。

问候。

Answer 1

当你试图获取元素时，它还不存在。
将脚本标记移动到关闭正文标记之前的底部。

<table>
    <tr>
        <td><a href="javascript:void(0)" id="aTag">TEST</a></td>
    </tr>
</table>
<script>
    function showAlert (text) {
        alert(text);
    }

    x = document.getElementById('aTag');
    x.setAttribute('onclick', "alert('Hello World')"); //WORKS
    x.setAttribute('onclick', "showAlert('Hello World')"); //DNW (showAlert is not defined)
</script>

FIDDLE

您无法获取尚未输出到DOM的javascript元素，因此每当您尝试获取元素时，请确保它可用。

Answer 2

像这样附加它应该做的工作：

x.onclick = function() {showAlert("foo");};

Demo

Answer 3

首先，感谢您抽出时间回复。

最后，我看了下面的答案：https://stackoverflow.com/a/21477793/3186538我最后得到了这段代码：

<html>

<head>
</head>

<body>
    <script>
        // Display text function
        function showAlert(text) {
            alert("Called in showAlert: " + text);
        }
        // But for the previous function to work, we must make sure that it is loaded after the rest of the DOM
        window.onload = function() {
            document.getElementById("aTag").onclick = function fun() {
                showAlert("Hello World");
            }
        }
    </script>

    <table>
        <tr>
            <td><a href="javascript:void(0)" id="aTag">TEST</a></td>
        </tr>
    </table>
</body>

</html>

现在，当我点击超链接时，我会看到一个显示Hello World消息的对话框。

再次感谢大家（当然还有SO）。

Javascript - 为onClick事件调用函数

3 个答案: