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. Divs don't have an src attribute. You're also nesting doubles quotes, and getElementsByClassName returns an array of DOM elements. — godfrzero
– godfrzero, Commented Aug 15, 2013 at 15:35
possible duplicate of How to use getElementsByClassName in javascript-function? -- look at the comments there as well and you will find tons of duplicates. — Felix Kling
– Felix Kling, Commented Aug 15, 2013 at 15:35

SLaks · Accepted Answer · 2013-08-15 15:30:54Z

2

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>.

answered Aug 15, 2013 at 15:30

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is my onclick script not changing my innerhtml?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related