Question

<script type="text/javascript">
function translateIt() {
        Microsoft.Translator.Widget.Translate("en", "es");
    }
</script>

<button onclick="translateIt()">Translate</button>

<script type="text/javascript">
document.getElementById("btn").onclick = function () {
        Microsoft.Translator.Widget.Translate("en", "es");
    }
</script>

<button id="btn">Translate3</button>

此html块包含两个应执行完全相同功能的按钮。因此，顶部按钮可以工作，但是底部按钮不起作用。＆＃39; onclick＆＃39;有什么区别？在HTML中实现与javascript内的实现？

Answer 1

如果您的第二个脚本示例出现在按钮之前，则getElementById将找不到任何元素。

通过将脚本标记移动到元素之后，它将正常工作。

<button id="btn">Translate3</button>

<script type="text/javascript">
document.getElementById("btn").onclick = function () {
        Microsoft.Translator.Widget.Translate("en", "es");
    }
</script>

Answer 2

点击处理程序的区别不在于，执行顺序不同。在第一个示例中，您定义了一些内容（函数），然后引用它（在HTML中）。在第二个示例中，您引用某些内容（HTML元素），然后然后定义它。

所以在第二个例子中，对getElementById("btn")的调用并没有找到任何东西，因为在它执行时该元素还没有存在。

HTML和JavaScript按照页面呈现时在页面上的顺序执行。从文档的顶部到底部。

javascript与html中的'onclick'之间的区别

2 个答案: