acessing innerHTML text node inside a block of HTML

Question

I'm trying to access the 12:00 number in this huge span of HTML. It's in the <div id = gameClock>. I tried using getElementById().innerHTML of the div, and then console log with a function that fires on click of the element, gives me nothing, no error either

function minusMinute() {
  time = window.document.getElementById('gameClock').innerHTML;
  console.log(time);
}

minusMinute = window.document.getElementById('minusMinute');

minusMinute.addEventListener('click', minusMinute, false);

<div class="row">
  <div class="text-center small-12 small-centered columns">
    <div class="row">
      <div id="gameClock" class=" small-6 small-centered columns">
        <span class='clockButtons badge primary' id='minusMinute'><i class='fi-minus'></i></span><span class='clockButtons badge primary'><i onClick='minusMinute'class='fi-plus'></i></span><span id='gameTime'>12:00</span><span class='clockButtons badge primary'><i class='fi-minus'></i></span>
        <span
        class='clockButtons badge primary'><i class='fi-plus'></i>
          </span>
      </div>
    </div>
  </div>
</div>

T.J. Crowder · Accepted Answer · 2015-12-13T11:24:53.987

2

You have multiple issues there:

You've declared a function called minusMinute, but you've also declared a variable called minusMinute, and assigning to it overwrites the function. So your
```
minusMinute.addEventListener('click', minusMinute, false);
```
line is hooking up the element as a click handler.
Your HTML also has onclick="minusMinute". If minusMinute were a function, that wouldn't do anything, because the function the browser creates to wrap your code there will just refer to minusMinute but not call it. onXyz attribute handlers should contain function calls (e.g., onclick="minusMinute()"), but if you're using addEventListener, you don't need the onclick attribute at all.
While it's true that the 12:00 is inside an element with id="gameClock", there a lot else in there as well. But helpfully it's all on its own inside the span with id="gameTime".

Here's a fixed version with minimal changes:

function minusMinute(){
  var time = window.document.getElementById('gameTime').innerHTML;
  console.log(time);
}

window.document.getElementById('minusMinute').addEventListener('click', minusMinute, false);

<div class="row">
<div class="text-center small-12 small-centered columns">
    <div class="row">
      <div id="gameClock"class=" small-6 small-centered columns">
        <span class='clockButtons badge primary' id='minusMinute'><i class='fi-minus'>minusMinuteIsHere</i></span><span class='clockButtons badge primary'><i class='fi-plus'></i></span><span id='gameTime'>12:00</span><span class='clockButtons badge primary'><i class='fi-minus'></i></span><span class='clockButtons badge primary'><i class='fi-plus'></i></span>
      </div>
    </div>
</div>

Changes:

I don't declare a minusMinute variable and assign to it, so the minusMinute function doesn't get overwritten.
I removed the onclick attribute
I used gameTime rather than gameClock
Just for the purposes of the snippet, I put some text inside the minusMinute element, since the snippet doesn't have your CSS and so there's no icon to click.

Side note: There's no need for window.document, just use document. window is a global variable (pointing to the global object, where most global variables are available as properties), and document is a global variable, so... I mean, you could also do window.window.document, or window.window.window.document. :-)

edited Dec 13 '15 at 11:24

answered Dec 13 '15 at 11:11

T.J. Crowder

1,031,962
187
1,923
1,875

Thanks T.J. I didnt realize the minusMinute var and function would conflict. all i had to do was change the handler to minusMinuteBtn and all worked!! – Barrard Dec 13 '15 at 11:28
Your code will not work on all js enabled browsers. Mine will. – mplungjan Dec 13 '15 at 13:24
@mplungjan: You mean the `addEventListener` thing? Yes, obsolete browsers don't have it. As the OP was using it, and the question had nothing to do with it, I didn't bother to change it. Note that `onclick` is *another* not-best-practices approach, as it doesn't play nicely with others. If you want to demonstrate cross-browser compatibility, [do it thoroughly](http://stackoverflow.com/a/23799448/157247). – T.J. Crowder Dec 13 '15 at 16:20
No. I do not agree. On click works and is a perfectly OK event handler. IE 8 is still hugely in use - especially in some corporations – mplungjan Dec 13 '15 at 16:22
@mplungjan: Yes, IE8 still has significant use, which is why I say be thorough and demonstrate modern event handling. – T.J. Crowder Dec 13 '15 at 16:29
Truly modern is $(...).on("click") – mplungjan Dec 13 '15 at 16:58
@mplungjan: Oh for crying out loud. People have perfectly valid reasons for sometimes not using libraries. I'm so done with this. – T.J. Crowder Dec 13 '15 at 17:03
You started the "very poor advice" that irked me no end – mplungjan Dec 13 '15 at 17:05
@mplungjan: Well, I'm sorry then. It's very well-established that using `onload` **just** to wait until the DOM is parsed is an anti-pattern. If you want to get all bent out of shape for my observing that, that's your call. – T.J. Crowder Dec 13 '15 at 17:05
I'm not that bent. You're the one crying out loud ;)))) – mplungjan Dec 13 '15 at 17:07

score 1 · Answer 2 · edited Dec 13 '15 at 12:03

1

Like mplungjan already mentioned, you should make sure the element is there when you try to get it's content (either by including the javascript at the end or using the onload function).

another problem that you also had is you used the same name for global variable minusMinute and the function name minusMinute so that would produce you the also give you an error.

edited Dec 13 '15 at 12:03

mplungjan

169,008
28
173
236

answered Dec 13 '15 at 11:28

flynorc

829
6
13

mplungjan · Answer 3 · 2015-12-13T13:39:38.780

0

You firstly need to do this when the Dom elements exist, for example onload :

window.onload=function() {
  var minusMinute = window.document.getElementById('minusMinute');
  minusMinute.addEventListener('click', minusMinute, false);
}

or simpler and more compatible - I assume you want gameTime instead of gameClock

window.onload=function() {
  document.getElementById('minusMinute').onclick=function() {
    var time = document.getElementById('gameTime').innerHTML;
    console.log(time);
  }
}

The above anonymous function also solves a name clash between your function and object.

You also have some weird onclicks in the html that needs to be removed, Lastly addEventListener is not compatible with all browsers.

Here is my code with your cleaned up HTML - I had to add some content to minusMinute to see it

window.onload = function() {
  document.getElementById('minusMinute').onclick = function() {
    var time = document.getElementById('gameTime').textContent;
    console.log(time);
  }
}

<div class="row">
  <div class="text-center small-12 small-centered columns">
    <div class="row">
      <div id="gameClock" class=" small-6 small-centered columns">
        <span class='clockButtons badge primary' id='minusMinute'><i class='fi-minus'><<</i></span>
        <span class='clockButtons badge primary'><i class='fi-plus'>>></i></span>
        <span id='gameTime'>12:00</span><span class='clockButtons badge primary'><i class='fi-minus'></i></span>
        <span class='clockButtons badge primary'><i class='fi-plus'></i></span>
      </div>
    </div>
  </div>
</div>

edited Dec 13 '15 at 13:39

answered Dec 13 '15 at 11:18

mplungjan

169,008
28
173
236

He'd be gtting an error if that were the case. Anyway, there are several *other* issues. And `onload` is **really late** in the process. Better to simply put the script at the bottom of the page. – T.J. Crowder Dec 13 '15 at 11:20
*"You firstly need to do this onload:"* No, he doesn't, and it's very poor advice. One need only ensure that the script tag is below the tags for the elements on which it operates (best practice is just before the closing `
` tag).
– T.J. Crowder Dec 13 '15 at 12:03
How so poor advise? It works fantastically - surely just your opinion here :/ – mplungjan Dec 13 '15 at 12:06
I changed the wording - better? – mplungjan Dec 13 '15 at 12:08
"*surely just your opinion here"* No, look around, it's **the standard** advice (such as [the YUI guidelines](https://developer.yahoo.com/performance/rules.html#js_bottom), some of the best-respected guidelines on the 'net). Waiting until `onload` means your page sits there in front of the user without the code having run for the entire time **all* subsidiary resources (images, etc.) load. – T.J. Crowder Dec 13 '15 at 12:08
*Slightly* better. Still suggests a well-known anti-pattern, but it's no longer actually wrong. – T.J. Crowder Dec 13 '15 at 12:09
That may be an issue or it may not be an issue. Poor advice is very strong. Suited me fine for 20 years. Perhaps I just have fast loading pages – mplungjan Dec 13 '15 at 12:11

acessing innerHTML text node inside a block of HTML

3 Answers3