Question

好的我是javascript的新手，但是我想调用一个onclick函数而不向锚标签添加onclick =“function（）”。这是我的脚本，但我无法让它工作：

<script type="text/javascript">
function clicka() {
 alert("hi");
}
document.getElementById('click').onclick = clicka;
</script>

<a href="#" id="click">click</a>

当我点击链接时，它应该提醒“嗨”，任何想法？

Answer 1

将SCRIPT标记放在A标记之后。浏览器按顺序解析标记，并且在解析SCRIPT标记时A仍然不存在。

其他一些评论也是：

您可以转储type="text/javascript"
您可以设置href =“javascript：void（0）”以避免在单击
或者您在onclick功能中return false;

Answer 2

将脚本放在a标记之后或将脚本包装在window.onload函数中。这些都可以起作用：

<script type="text/javascript">
window.onload = function() {
    function clicka() {
        alert("hi");
        return false;
    }
    document.getElementById('click').onclick = clicka;
}
</script>
<a href="#" id="click">click</a>

或者：

<a href="#" id="click">click</a>
<script type="text/javascript">    
function clicka() {
    alert("hi");
    return false;
}
document.getElementById('click').onclick = clicka;
</script>

它不起作用的原因是你在a标记存在之前绑定到a标记的点击事件;因此它找不到任何元素，也不会做任何事情。

通过将脚本放在window.onload中，只有在加载页面中的所有元素并找到元素后，才会指示浏览器运行脚本。

为防止浏览器实际重定向到#，您可以使用clicka功能return false，如上所述。

Answer 3

您的脚本在页面完全加载之前正在运行。所以document.getElementById（'click'）什么都不返回。如果要将脚本保留在顶部，则需要向主体添加onload事件：

<script type="text/javascript">

function clicka() {
 alert("hi");
}

function init() {
 document.getElementById('click').onclick = clicka;
}

</script>

<body onload="init()">

  <a href="#" id="click">click</a>

</body>

或者您可以使用window.onload

<script type="text/javascript">

function clicka() {
 alert("hi");
}

function init() {
 document.getElementById('click').onclick = clicka;
}

window.onload = init;

</script>


<a href="#" id="click">click</a>

Answer 4

Tatu Ulmanen's解决方案是正确的，但值得讨论的原因。这是对加载页面时会发生什么的快速而肮脏的解释

JavaScript和DOM是两回事。简而言之，DOM是一种分层数据结构，表示通过document等对象向API公开API的HTML页面。

DOM可以被认为是一个不平衡的树，在任何级别都有任意（不固定）的节点数量。加载页面时，将评估每个节点/元素/标记，并按照遇到的顺序将其附加到DOM树。遇到script元素时，会在评估HTML文档的其余部分之前对其进行全面评估和执行。

由于您的script节点位于它所引用的a节点之前，因此DOM树中尚不存在a节点，这就是导致问题的原因。通过在引用的节点之后移动script元素（通常在关闭body标记之前的页面底部），可以避免这些类型的错误。另一种常见做法是使用DOM的onload事件;这延迟了任何被指定为其处理程序的函数的执行，直到整个HTML页面被解析/呈现到DOM树中。后一种方法还允许您将脚本包含在您想要的页面中的任何位置（例如：head中）。

Answer 5

如果函数在标记之前，document.getElementById('click')将返回null。所以把它放在标签之后它会起作用。

Javascript onclick脚本

5 个答案: