为什么我的内联JavaScript函数不起作用？

Question

似乎有什么问题？ 代码不起作用，文本不会改变。

function translate() {
    document.getElementById("tex").innerHTML = "BLABLA";
}

<h1 align="center"><font size="100">What Is BLA: </font></h1>
<p id ="tex"><font size="10">BLA</font></p>
<button onclick="translate()">Translate</button>

Answer 1

问题在于某些浏览器，例如Chrome，DOM元素有translate property（MDN不会将Chrome列为支持此功能，但确实具有该属性）。在JavaScript事件属性的上下文中，那些属性shadow任何同名的全局变量。

如果您检查开发者控制台，则会看到一条消息，指出translate因此而不是一个功能。

  

未捕获的TypeError：translate不是函数

如果更改了该功能的名称，则可以避免此问题：

function myTranslate() {
    document.getElementById("tex").innerHTML = "BLABLA";
}

<h1 align="center"><font size="100">What Is BLA: </font></h1>
<p id ="tex"><font size="10">BLA</font></p>
<button onclick="myTranslate()">Translate</button>

Answer 2

也许还需要注意的是，您尝试设置innerHTML元素的p，其ID为tex。但元素中有一个子元素。您可以设置该项目的innerHTML属性。

document.getElementById("tex").childNodes[0].innerHTML = "BLABLA";