Uncaught TypeError: Cannot set property 'innerHTML' of null

Question

This is my code but for some reason the innerHTML is not changing the content inside of my content_holder div, help would be appreciated!

I have tried multiple approaches and have done a lot of research and I have not been able to fix this error.

  <head>

        <link rel="stylesheet" href="styles/default.css" />

  </head>
  <script type="text/javascript" src="jquery/jquery.js"></script>
  <script type="text/javascript">

          function news_clicked(){

          $("#content_holder").fadeOut(200);
          document.getElementById("#content_holder").innerHTML=("<?php("news_include.php"); ?>");
          $("#content_holder").fadeIn(200);

          }

  </script>

  <body>


        <header id="header_bar">

        <div id="top_holder">

             <div id="top_holder_left">
                <a id="logo"></a>
             </div>

             <div id="top_holder_right">
                <a class="nav_button" href="#">HOME</a>
                <a class="nav_button" onclick="news_clicked()" href="#">NEWS</a>
                <a class="nav_button" href="#">GIGS</a>
                <a class="nav_button" href="#">MUSIC</a>
                <a class="nav_button" href="#">VIDEOS</a>
                <a class="nav_button" href="#">SOCIAL</a>
             </div>

        </div>

        </header>

                 <div id="content_holder">

                      <?php include("music_include.php"); ?>

                 </div>

  </body>

Related: [When to use the `#` symbol to get a DOM element?](https://stackoverflow.com/q/15486154/4642212). — Sebastian Simon, Jul 06 '20 at 04:51

score 3 · Accepted Answer · answered Jun 25 '13 at 17:31

3

You have to use

document.getElementById("content_holder")

Instead of

document.getElementById("#content_holder")

as # doesn't apply for getElementById. This method expects a plain element id and not a selector.

answered Jun 25 '13 at 17:31

Claudio Redi

67,454
15
130
155

@Yve Well, the OP clearly doesn't understand, so a code-only answer (which is what this originally was, with edits we can't see) doesn't help anyone. – Ian Jun 25 '13 at 17:36
1

@Ian: I'd say you have to give people a reasonable amount of time to improve his answer, otherwise you will spend too much time of your life adding this same comment all around as normally answers are incrementally created. – Claudio Redi Jun 25 '13 at 17:42
@ClaudioRedi I agree, but at the same time, one could argue that answers should have some substance before being submitted. In the long run, the answer with better details should be recognized and updated/accepted more than the answers with only code, so why rush to post an answer? I understand plenty of people, including myself, post shorter answers, and progressively improve it, but that doesn't mean everyone does, so it doesn't hurt to ask for it. You're right though, I commented pretty quickly after you submitted, so I should've given more time. I just felt it was an easy explanation – Ian Jun 25 '13 at 17:47
Thanks for the good answer, and the laugh when reading these :P, I can't believe I was as blind as that to not notice an error that small, kudos :) – Aiden Jun 27 '13 at 06:27

score 0 · Answer 2 · answered May 14 '14 at 01:51

0

Every time I have seen this error it has been a cheesy mistake on my part where I try to call an id for a div that does not exist on that page. Make sure the element you are trying to call exists on the page you are trying to change.

answered May 14 '14 at 01:51

Chris Klingler

5,258
2
37
43

Uncaught TypeError: Cannot set property 'innerHTML' of null

2 Answers2

Linked