Why won't my inline JavaScript function work?

Question

What seems to be the problem? The code doesn't work, the text does not change.

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>

if you change the function name it works fine. plnkr.co/edit/f0x2eHG3aKfrziLtDHxI?p=preview — hurnhu
– hurnhu, Commented Dec 13, 2016 at 21:18

Alexander O'Mara · Accepted Answer · 2016-12-13 21:22:27Z

13

The problem is in some browsers, like Chrome, DOM elements have a translate property (MDN does not list Chrome as supporting this feature, but it does have the property). In the context of JavaScript event attributes, those properties shadow any globals of the same name.

If you check your developer console, you should see a message saying that translate is not a function because of this.

Uncaught TypeError: translate is not a function

If you change the name of the function, you will avoid this issue:

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>

edited Dec 13, 2016 at 21:22

answered Dec 13, 2016 at 21:18

Alexander O'Mara

60.9k19 gold badges176 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Serlite Over a year ago

This is the problem at hand, yes! I was trying to dig up some documentation to verify it so I didn't write up an answer myself.

score 0 · Accepted Answer · 2016-12-13 21:22:10Z

0

Maybe also to note is that you are trying to set the innerHTML of the p element with the id tex. But the element has a child element in it. You can set the innerHTML property of that item.

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

edited Dec 13, 2016 at 21:22

answered Dec 13, 2016 at 21:16

user7248003

2 Comments

mherzig Over a year ago

Or better yet, don't use the <font> tag and use CSS instead!

nanobar Over a year ago

Agreed, don't use the font tag

Collectives™ on Stack Overflow

Why won't my inline JavaScript function work?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related