Annoying JS error null/undefined

  • (2 Pages)
  • +
  • 1
  • 2

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

#1 codelrnr   User is offline

  • New D.I.C Head

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

Annoying JS error null/undefined

Posted 24 May 2018 - 09:16 AM

I have commented out an entire JS file along with HTML Id's and the simple code below still generates a "Cannot set property 'innerHTML' of null" error.I have tried this exact code in online editors and it works. As a result, other JS using not only this property but, other code is not working at all. How can anything be null/undefined if the entire code has been commented out, even cut (file saved, page re-loaded)? Please help me as this is annoying due to taking so long to fix! =).

//HTML

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




JS

document.getElementById("p1").innerHTML = Number("ten 10");




Is This A Good Question/Topic? 0
  • +

Replies To: Annoying JS error null/undefined

#2 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2654
  • View blog
  • Posts: 10,584
  • Joined: 03-December 12

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 09:21 AM

What is the entire file? If the Javascript is being executed before the page is rendered, that id will not exist, and be nothing.
Was This Post Helpful? 2
  • +
  • -

#3 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 - 09:28 AM

The entire external file consists of various scripts. I have the JS file linked to the HTML file, along with all the standard HTML hoopla. Basically, the code in my message here would be the "first" in the files (the HTML and JS). That's what I meant by nothing else existing when I cut (removed) the existing code from both files and just left the code in my inquiry here. If I can't even fix this error with my first lines of code on each file, I can't get anything else to work. =).
Was This Post Helpful? 0
  • +
  • -

#4 sepp2k   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2639
  • View blog
  • Posts: 4,210
  • Joined: 21-June 11

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 09:33 AM

Can you please post enough code to reproduce the problem? As is there will clearly not by any errors, since the HTML that you've posted doesn't even contain a script tag, so no Javascript would be run at all.

As astonecipher already hinted at, it makes a big difference whether you include the Javascript before or after the definition of p1.
Was This Post Helpful? 1
  • +
  • -

#5 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2654
  • View blog
  • Posts: 10,584
  • Joined: 03-December 12

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 09:44 AM

Here is another hint. Place all the script tags just before the closing body tag. There are more modern ways to do this, but you are better served in the simple aspects first.
Was This Post Helpful? 2
  • +
  • -

#6 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 - 09:47 AM

My apologies for leaving out the markup. I am somewhat new to JS (refreshing my memory on some things from about 5 1/2 years ago). Please correct me where I err. I included the JS here exactly as in my file (broken after the = sign). Basically put, the below code would be my first (only) code in the file.

<head>
</head>

<body>

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

</body>




document.getElementById("p1").innerHTML =

   Number("ten 10");



Was This Post Helpful? 0
  • +
  • -

#7 ndc85430   User is offline

  • I think you'll find it's "Dr"
  • member icon

Reputation: 888
  • View blog
  • Posts: 3,587
  • Joined: 13-June 14

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 09:53 AM

That still isn't a code sample that anyone can use to reproduce the problem - there's nothing there that tells us how the HTML and JS are linked.
Was This Post Helpful? 2
  • +
  • -

#8 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 - 11:10 AM

Okay, thank you. Different approach from me now (instead of writing another reply with missing info). Do you need the <head>, <script> info with the JS link info? Other? =).
Was This Post Helpful? 0
  • +
  • -

#9 sepp2k   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2639
  • View blog
  • Posts: 4,210
  • Joined: 21-June 11

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 11:16 AM

We need to be able to copy your code into files and then get the same error message that you do. So simply make sure that the code you post produces the error.
Was This Post Helpful? 1
  • +
  • -

#10 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2654
  • View blog
  • Posts: 10,584
  • Joined: 03-December 12

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 11:28 AM

https://jsfiddle.net/xL7p9w65/1/
Was This Post Helpful? 1
  • +
  • -

#11 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 - 11:32 AM

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? 0
  • +
  • -

#12 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2091
  • View blog
  • Posts: 6,398
  • Joined: 15-January 14

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 11:42 AM

That example should work fine.
Was This Post Helpful? 0
  • +
  • -

#13 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 - 11:45 AM

Viewing this in Chrome v66.0.3359.181, error from Dev Tools console., and FF Quantum v60.0.1. =).

Coding in notepad as I'm at work. Thank you, astonecipher for the JS Fiddle link. Maybe I should start coding there. =).
Was This Post Helpful? 0
  • +
  • -

#14 sepp2k   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2639
  • View blog
  • Posts: 4,210
  • Joined: 21-June 11

Re: Annoying JS error null/undefined

Posted 24 May 2018 - 11:46 AM

Are you saying that when you open that file, you get the error from your first post ("Cannot set property 'innerHTML' of null")? Because if I open that file, it just displays "NaN", which is the expected behaviour, right? And I don't see why you'd get an exception for that file.

Have you really tested it with that exact file?
Was This Post Helpful? 2
  • +
  • -

#15 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 - 11:57 AM

View Postsepp2k, on 24 May 2018 - 11:46 AM, said:

Are you saying that when you open that file, you get the error from your first post ("Cannot set property 'innerHTML' of null")? Because if I open that file, it just displays "NaN", which is the expected behaviour, right? And I don't see why you'd get an exception for that file.

Have you really tested it with that exact file?


Yes, Sir. I'm using just an index.htm, index.js file (linked) and the only code on each is the code I've provided previously. Viewing in Chrome, FF, and the error in Chrome using Dev Tools>Console. Error pops-up on loading of page, re-loading/re-freshing every time I attempt to fix. Didn't I call it annoying? Lol. For the life of me I can't understand why as there is just a total of about 15 lines of code, give or take. As mentioned in my start of inquiry, I had problems with other properties like "onkeypress", and innerHTML in other code in the JS file. I'm on empty as to why! =).
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2