-5

Problem:

I am making a simple demo site to play around with JavaScript and I'm getting a "TypeError: document.getElementById(...) is null" when trying to change an elements display value to block upon clicking a button.

Seems simple enough but the error is persistent. I have tried the suggested solutions of using window.onload or placing my script in the bottom of the body tag but nothing helps. Can anyone help me out and point out what i might be doing wrong? (P.S I'm 2 days into learning JS)

<nav class="middle">
  <ul>
    <li><a href="#intro" onclick="buttons()">Intro</a></li>
    <li class="line">|</li>
    <li><a href="#about" onclick="buttons()">About</a></li>
    <li class="line">|</li>
    <li><a href="#contact" onclick="buttons()">Contact</a></li>
    <!--<li><a href="#elements">Elements</a></li>-->
  </ul>
</nav>

<div id="about">
  <header id="header2">
  <h1>Farhan Chandel</h1>
  <h3> Software Systems Major</h3>
</header>
</div>


JS Code

function buttons() {
document.getElementById(about).style.display="block"; }

My apologoies, the 'name' in the brackets was from a previous different attempt at solving the problem. I have changed it back to the original problem.

More Clarification: The 'about' div has a display style of none; and upon clicking one of the buttons I would like it to set it to block. From reading around I understand that it is most likely due to the div not being registered yet by the time the script has run but I have put the script tags below all the content so I am confused as to why they have not been registered by the time the script runs.

Farhan Chandel
  • 1
  • 2
  • 6
    Please include any snippets of code as text within your post. Images of code do make it more difficult to help, so fewer users will be willing to try. The `{}` button in the question editor will help you format them as code blocks. – Jonathan Lonowski Dec 03 '16 at 03:27
  • Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – DarkHorse Dec 03 '16 at 03:29
  • 1
    Instead of a string id, you have used the variable `name` here at `document.getElementById(name)`. Can you tell where you declared the variable `name`? It would be better if you can copy paste the code here instead of a screenshot which is unclear and didn't have the full code visibility of the html. If name is string then it should be like this, `document.getElementById('name')` with a `quote` – Aruna Dec 03 '16 at 03:30
  • From the screenshot you don't have `name` anywhere. – Ayan Dec 03 '16 at 03:32
  • The value of `name` is an empty string. What did you expect it to be? – Felix Kling Dec 03 '16 at 04:29

3 Answers3

2

So far, you haven't specified what value name should have in this statement:

document.getElementById(name).style.display="block";

This isn't failing outright because your browser has already defined name as a global, which is meant to identify the window itself. Though, the default value of the global is just an empty string:

console.log(name); // ""

By using the global, the statement means the same as:

document.getElementById("").style.display="block";

And, getElementById() won't match an element based on an empty string, so it returns null telling you that "no matching element was found."

One options for resolving this...

You can define your own name, one that's existing only within the function separate from the global, as a named parameter:

function buttons(name) {
  // ...
}

Then, provide the value you'd like to use as an argument:

<li><a href="#intro" onclick="buttons('intro')">Intro</a></li>
<!--                                  ^^^^^^^

Now, with that, the statement behaves the same as:

document.getElementById('intro').style.display="block";

Note the mixture of quotations – double-quotes for the HTML attribute and single-quotes for the JavaScript string. This is to avoid the 2 parsers, HTML and JavaScript, clobbering each other and having one believe its value ended earlier than intended.

Jonathan Lonowski
  • 121,453
  • 34
  • 200
  • 199
0

I guess

document.getElementById("name").style.display = "none";

You are not putting name of ID or Class or Tag name in "quotes"; see this example.

Xiong Chiamiov
  • 13,076
  • 9
  • 63
  • 101
Ishu
  • 117
  • 7
0

It seems you don't have "name" id in html page while looking at screenshot.

And document.getElementById("name") <== ID name should be inside quote ("div_name").

document.getElementById("DIV_NAME").style.display = "block";

Try This.

l3lackcurtains
  • 162
  • 3
  • 6