html code working in IE/FireFox but not in chrome

Question

This is really simple code that I wanted to try and get running because I wanted to learn some JavaScript basics. The code works in Internet Explorer and Firefox but not on chrome. I feel like I must be missing something really stupid.

var frame = 2;
function animate(){

if(frame == 1){
    frame = frame + 1;
    document.getElementById("animate").src = "walking1.png";
}
else if (frame == 2){
    frame = frame + 1;
    document.getElementById("animate").src = "walking2.png";
}
else{
    frame = 1;
    document.getElementById("animate").src = "walking3.png";
}
}

<p> clicking the button will change the image.</p>

<img id="animate" src="walking1.png">

<button onclick="animate()">click me to animate</button>

the pictures used are saved in the same folder.

score 5 · Accepted Answer · edited Apr 09 '23 at 20:01

5

animate is used both as a function name and an id, which cause it to not work in Chrome.

Also, mentioned in this post, a function alone with the name animate might also not work in Chrome, based on how it is implemented. (see notes below)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var frame = 2;
function animatee(){

if(frame == 1){
    frame = frame + 1;
    document.getElementById("animate").src = "http://placehold.it/100";
}
else if (frame == 2){
    frame = frame + 1;
    document.getElementById("animate").src = "http://placehold.it/100/f00";
}
else{
    frame = 1;
    document.getElementById("animate").src = "http://placehold.it/100/00f";
}
}
</script>
</head>
<body>
  <p> clicking the button will change the image.</p>

  <img id="animate" src="http://placehold.it/100/0f0">

  <button onclick="animatee();">click me to animate</button>

</body>
</html>

Notes:

An observation made by guest271314 shows that if the onclick handler is not attached inline, the issue is not present

window.onload = function() {

  var frame = 2;

  function animate() {
    console.log("animate called")
    if (frame == 1) {
      frame = frame + 1;
      document.getElementById("animatee").src = "http://placehold.it/100x100";
    } else if (frame == 2) {
      frame = frame + 1;
      document.getElementById("animatee").src = "http://placehold.it/200x200";
    } else {
      frame = 1;
      document.getElementById("animatee").src = "http://placehold.it/100/00f";
    }
  }
  
  document.querySelector("button").onclick = animate;
}

<p> clicking the button will change the image.</p>

<img id="animatee" src="http://placehold.it/100/0f0">

<button>click me to animate</button>

To their defense Kaiido contributed with the specs: https://html.spec.whatwg.org/multipage/nav-history-apis.html#named-access-on-the-window-object

Knu contributed with this bug report:https://www.w3.org/Bugs/Public/show_bug.cgi?id=11960

edited Apr 09 '23 at 20:01

user3840170

26,597
4
30
62

answered Dec 11 '16 at 06:49

Asons

84,923
12
110
165

Weird that living specs doesn't tell how to handle this exact case (should a named element overwrite a previously set global variable ?). – Kaiido Dec 11 '16 at 06:55
@LGSon, well it's an interesting link too, but OP's problem was a double one, because what you said is also true : https://jsfiddle.net/aagepzyf/ this fiddle works in FF, not in chrome (and I thought playing with "wrap in head/body" would change something in chrome, but it doesn't.) – Kaiido Dec 11 '16 at 07:05
1

To me, this all sounds like a chrome bug : https://jsfiddle.net/aagepzyf/1/ but to their defense, [specs](https://html.spec.whatwg.org/#named-access-on-the-window-object) don't seem to say how it should be handled. (But returning undefined is clearly not the good course of action either :) ) But all this can be avoided by using eventListeners, or by avoiding unscoped variables, so the dupe is still a correct target. – Kaiido Dec 11 '16 at 07:22
2

@Kaiido https://www.w3.org/Bugs/Public/show_bug.cgi?id=11960 – Knu Dec 11 '16 at 07:39
@Kaiido Issue appears to be global event attribute https://jsfiddle.net/aagepzyf/2/ – guest271314 Dec 11 '16 at 07:42
@LGSon _"a function alone with the name animate will also not work in Chrome"_ When used at `.onclick` function named animate is called without an error, see jsfiddle. – guest271314 Dec 11 '16 at 07:46
@guest271314 I will update ... and use your observation in a note as I find it useful, thanks – Asons Dec 11 '16 at 07:49
1

@guest271314, Yes, here you're scoping the variable `animate` into the anonymous function used as `window.onload` handler. So it won't be confused with named elements which should be returned by `window[name_of_namedElement]`. The problem is only with global (window) scoped variable. The thing strange in chrome is that in the HTML event handler, it sets the variable to undefined, while you can still access it by providing exactly [`window[variableName]`](https://jsfiddle.net/aagepzyf/4/). So I'm rather confident, **this** is a bug in chrome, since it just ignores both. – Kaiido Dec 11 '16 at 10:21
1

But as stated before, and confirmed by @Knu, this is also a quirk in the specs, which just seems to stand from 2012?! – Kaiido Dec 11 '16 at 10:21

html code working in IE/FireFox but not in chrome

1 Answers1