Annoying JS error null/undefined

  • (2 Pages)
  • +
  • 1
  • 2

23 Replies - 1310 Views - Last Post: 24 May 2018 - 02:26 PM

#16 sepp2k   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2620
  • View blog
  • Posts: 4,175
  • Joined: 21-June 11

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 12:10 PM

So just to make absolutely sure we're on the same page: If you right click the page with the error (the error being "Cannot set property 'innerHTML' of null") in your browser and click "View Page Source", you see the exact same code that you posted here? Without any differences?
Was This Post Helpful? 1
  • +
  • -

#17 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2542
  • View blog
  • Posts: 10,184
  • Joined: 03-December 12

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 12:21 PM

Thanks for the clarification request, sepp2k.

You mention index.htm and index.js as linked, but the code you posted says it is a single file. This is where we are having communication difficulty.

View Postcodelrnr, on 24 May 2018 - 01:32 PM, said:

Okay, thank you. I hope the following provides you with what you need. =)

<!DOCTYPE>

<html>

<body>

<p id="p1"></p>

<script>

document.getElementById("p1").innerHTML =

  Number("10 ten"); //output should be NaN?

</script>

</body>
</html>



Was This Post Helpful? 1
  • +
  • -

#18 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 12:31 PM

Just to clarify the clarification: we can only debug the code you show us. If you're showing us code that is not the code you're running, then we're not debugging the code you're running.
Was This Post Helpful? 1
  • +
  • -

#19 codelrnr   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-May 18

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 01:35 PM

I'm beginning to understand "exact (letter for letter, symbol for symbol)" code is what you're requesting from me, I think. This was a little difficult as both files contained the other code I've been working on and, I had this simply commented out entirely on both files except for the script I've referenced encountering the error. I also don't know if you want me to separate in code tags here the HTML from JS as the external JS doesn't have any script tags, just JS code. But, what I tagged here now is exactly what is on both files, respectively. So, now, I have deleted all HTML and JS code from files, minus the required HTML code (doctype, script tag linking the external JS file, <html>, <body>, etc tags and some <br /> tags I have included for scrolling purposes (preference of mine) and, all I'm left with is the required HTML, including the ID for this example, and in the external JS file the JS code. Result is same error and a blank page in Chrome. =).

HTML:

<!DOCTYPE>

   <html>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<head>      
</head>

<script src ="index.js"></script>

<body>

<p id="p1"></p>

</body>
</html>





JS:

//using Number method

document.getElementById("p1").innerHTML =

   Number("10 ten"); //output should be NaN?




Was This Post Helpful? 0
  • +
  • -

#20 sepp2k   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2620
  • View blog
  • Posts: 4,175
  • Joined: 21-June 11

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 01:45 PM

Move the script tag to the end of the body (just like it was in the code that you've previously posted) and the problem will be fixed.

View Postcodelrnr, on 24 May 2018 - 10:35 PM, said:

I'm beginning to understand "exact (letter for letter, symbol for symbol)" code is what you're requesting from me, I think


What we were asking for was code that reproduces the problem. That does mean that the exact code should reproduce the problem, but it does not mean that you should post your original code unchanged. It's perfectly okay (and often helpful) to simplify the code before posting, BUT you need to make sure that the code still reproduces the problem. That means that you should put the code in a file and test it before you post it. And the code in that test file should indeed be exactly, word-for-word the same code that you post here.

Previously you've posted code here that completely fixed the problem. But you did not even realize that you solved your problem because you did not test that code. You only tested the broken version of the code, never the code that you actually posted here.
Was This Post Helpful? 1
  • +
  • -

#21 codelrnr   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-May 18

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 01:58 PM

View Postsepp2k, on 24 May 2018 - 01:45 PM, said:

Move the script tag to the end of the body (just like it was in the code that you've previously posted) and the problem will be fixed.

View Postcodelrnr, on 24 May 2018 - 10:35 PM, said:

I'm beginning to understand "exact (letter for letter, symbol for symbol)" code is what you're requesting from me, I think


What we were asking for was code that reproduces the problem. That does mean that the exact code should reproduce the problem, but it does not mean that you should post your original code unchanged. It's perfectly okay (and often helpful) to simplify the code before posting, BUT you need to make sure that the code still reproduces the problem. That means that you should put the code in a file and test it before you post it. And the code in that test file should indeed be exactly, word-for-word the same code that you post here.

Previously you've posted code here that completely fixed the problem. But you did not even realize that you solved your problem because you did not test that code. You only tested the broken version of the code, never the code that you actually posted here.


Wowsers! That was all? Lol. Thank you very much! I'm new to the forums too, so, I'm learning about your requirements as of my posting today. I will adhere to in the future. Still a bit confused about my issue. The other code I mentioned (including loops, conditionals, styles) had worked fine in the browser without having the script tag within the body (even above closing body tag where I placed now). Why is this? Is JS picky about certain code executing if this particular tag is not at this location? This would be new to me as well. Before doing anything else to this thread regarding closing, please allow me to run a couple more lines of code and if they all execute without issue, I'm happy to give you the thumbs up to close (whatever you do). =).
Was This Post Helpful? 0
  • +
  • -

#22 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 02:11 PM

The browser will execute Javascript code when it gets to it, and it will build the HTML page as it reads through the HTML (so it builds it as it reads it, not waiting to read everything then build it all at once). So, by the time it got to your script tag, the HTML element that you were trying to change was not built yet. It's just like reading a book, you're trying to refer to something that hasn't happened yet because the browser hasn't gotten that far. Other than moving Javascript code to the end of the body, the other way to handle that is to have the only part of your code that gets executed (other than defining functions and whatever else) is code that attaches a listener to the ready event, so that after the browser finishes building the page it will fire the ready event, which runs whatever code you want when the page is ready. You can put that in the head if you want, the browser will let you attach event listeners in the head.
Was This Post Helpful? 2
  • +
  • -

#23 codelrnr   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 24-May 18

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 02:22 PM

View PostArtificialSoldier, on 24 May 2018 - 02:11 PM, said:

The browser will execute Javascript code when it gets to it, and it will build the HTML page as it reads through the HTML (so it builds it as it reads it, not waiting to read everything then build it all at once). So, by the time it got to your script tag, the HTML element that you were trying to change was not built yet. It's just like reading a book, you're trying to refer to something that hasn't happened yet because the browser hasn't gotten that far. Other than moving Javascript code to the end of the body, the other way to handle that is to have the only part of your code that gets executed (other than defining functions and whatever else) is code that attaches a listener to the ready event, so that after the browser finishes building the page it will fire the ready event, which runs whatever code you want when the page is ready. You can put that in the head if you want, the browser will let you attach event listeners in the head.


Excellent! I'm copying this response and pasting within my comments to learn this. Thank you very much! =).
Was This Post Helpful? 0
  • +
  • -

#24 sepp2k   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2620
  • View blog
  • Posts: 4,175
  • Joined: 21-June 11

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 02:26 PM

View Postcodelrnr, on 24 May 2018 - 10:58 PM, said:

I'm new to the forums too, so, I'm learning about your requirements as of my posting today.


Just to clear: This isn't a rule of this site¹ so much as a rule of logic. That is, how could I possibly tell you that you need to move your script tag to the end if the code you post already has the script tag at the end?

In other words, it's not that we refuse to help you unless you follow that rule; it's that we can't help you unless you do (except, you know, for educated guesses about what your real code might look like).

Do note that astonecipher already suggested moving the script tag to the end in post #5. So you've been told to move the script tag to the end and you've posted code where the script tag was, in fact, at the end. Therefore we had every reason to assume that your real code also had the script tag at the end (every reason, that is, except that you still were getting the same exception), so suggesting that you move it to the end (again) would have made no sense.

I don't mean to harp on, but just because this has led to so much annoyance and wasted time in the past, let me reiterate the key point: It is impossible to accurately answer the question "Why does this code not work" if the question is accompanied by code that works perfectly fine (or fails to work for reasons completely unrelated to why the real code does not work). So only ever post code that you know causes the same error as your real code. And knowing means that you've run the exact code that you've posted and seen that it produces the same error.

Quote

Still a bit confused about my issue. The other code I mentioned (including loops, conditionals, styles) had worked fine in the browser without having the script tag within the body (even above closing body tag where I placed now). Why is this? Is JS picky about certain code executing if this particular tag is not at this location?


Did your original code access the tags inside the body in any way, such as calling getElementById? If so, did that happen inside call backs or directly at the outer level of the code? The problem occurs if you access elements of the DOM in code that runs before the DOM is fully constructed.

To quote astonecipher's first reply in this thread:

View Postastonecipher, on 24 May 2018 - 06:21 PM, said:

If the Javascript is being executed before the page is rendered, that id will not exist, and be nothing.


What this means is that your Javascript code can only access the id p1 if the code executes after the p-tag with that id has been processed. The simplest way to accomplish that is to move the script tag after the p tag in the file (another solution would be to put the whole code in a callback that only fires once the page is fully rendered).

Quote

Before doing anything else to this thread regarding closing


We don't close threads here unless they turn hostile or otherwise violate the rules (or if someone other than the OP replies, like, a year later - long after the OP either solved his issue or moved on). We also don't mark them as solved or anything like that. So no need to worry about that.




¹ I mean, it's probably mentioned in the rules somewhere. But that would be as a reminder that it's usually difficult-to-impossible to help otherwise, not as a hoop for users to jump through.
Was This Post Helpful? 1
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2