Why is my onclick script not changing my innerhtml?

Question

I have a very simple webpage I took from a template. On the right I have a list of links in a div and when clicking on them I want an html page located on my server to load in the inner div area. When clicking on the link, nothing happens. I've also tried setting the innerHtml to just a text value in case the src part is invalid, but that too does nothing. What am I missing? This looks like all the examples I've gone through.. And note I'm only giving the partial html, so I know the body isn't closed etc.

I have:

<body>
  <script>
    function results()
    {
      document.getElementsByClassName('mid-left-container').innerHTML="src="..\VRS_BVT\VRS_Test.html""
    }
  </script>

  <div id="main-wraper">
    <div id="top-wraper">
      <div id="banner">Automation Server</div>

    </div>
    <div id="mid-wraper">
      <div class="mid-wraper-top">
        <div class="mid-leftouter">
          <div class="mid-left-container">
            blah blah
          </div>
        </div>
        <div class="right-container">
          <div class="right-container-top">
            <h3><span class="yellow-heading">Projects</span></h3>
            <ul>
              <li><a href="#" onclick="results()">VRS BVT</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

It looks like you're trying to set the `src` attribute on a `div`. `Div`s don't have an `src` attribute. You're also nesting doubles quotes, and `getElementsByClassName` returns an array of DOM elements. — godfrzero, Aug 15 '13 at 15:35
possible duplicate of [How to use getElementsByClassName in javascript-function?](http://stackoverflow.com/questions/14142677/how-to-use-getelementsbyclassname-in-javascript-function) -- look at the comments there as well and you will find tons of duplicates. — Felix Kling, Aug 15 '13 at 15:35

score 2 · Accepted Answer · answered Aug 15 '13 at 15:30

getElementsByClassName() returns an array (actually a NodeList) of matching elements.

You're creating a new innerHTML property on that array, which has no effect.

Instead, you need to get an actual element from the array and set its innerHTML:

document.getElementsByClassName(...)[0].innerHTML = ...

Also, your string literal is invalid syntax.
You need to use single-quotes or escape the double-quotes.

Also, putting src="..\VRS_BVT\VRS_Test.html" in the content of an HTML element will not load anything from the server.
You need to use AJAX or an <iframe>.

Why is my onclick script not changing my innerhtml?

1 Answers1