innerHTML Not Changing in Javascript onClick

Question

I have a default page which has bootstrap tabs. When i click one of the tabs the content loads from the relevant DIV but when i click the other tab it does not replace the other Div.

All code below

Default HTML

function load_RbCode() {
  document.getElementById("rbCode").innerHTML = '<object type="text/html" data="functionality.html" style="width: 100%; height: -webkit-fill-available"></object>';
}

function load_HelpModalCode() {
  document.getElementById("helpModalCode").innerHTML = '<object type="text/html" data="help_modal.html" style="width: 100%; height: -webkit-fill-available"></object>';
}

<div>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a id="rbCodeMenu" class="nav-link" href="#" onclick="load_RbCode()">Rule Builder Code</a>
    </li>
    <li class="nav-item">
      <a id="helpModalCodeMenu" class="nav-link" href="#" onclick="load_HelpModalCode()">Help Modal</a>
    </li>
  </ul>
  <div id="rbCode"></div>
  <div id="helpModalCode"></div>
</div>

As i said it goes to the correct file and displays. If i click the 'Help' tab first then the 'Rule' tab it does replace but i think this is because there is a lot more HTML in the 'Rule' file but if i select 'Rule' tab first then the 'Rule' HTML still displays and it should just be a button which launchs a Modal

"the 'Rule' HTML still displays" ....well you have not got any code which would remove it, so yes it will still be there. The other HTML is probably just underneath it. Without some CSS info or a working demo it's hard to be sure. — ADyson
– ADyson, Commented Feb 19, 2019 at 9:24
P.S. Any particular reason you're using <object just to display a HTML file? You could load it into a regular div using AJAX, or use an iframe. <object is normally used for multimedia like Flash, or embedding a PDF or something — ADyson
– ADyson, Commented Feb 19, 2019 at 9:54

brk · Accepted Answer · 2019-02-19 09:29:11Z

Prevent the default behavior of the anchor tag

function load_RbCode(e) {
  e.preventDefault();
  document.getElementById("rbCode").innerHTML = '<object type="text/html" data="functionality.html" style="width: 100%; background:red;height: -100%"></object>';
}

function load_HelpModalCode(e) {
  e.preventDefault();
  document.getElementById("helpModalCode").innerHTML = '<object type="text/html" data="help_modal.html" style="width: 100%;background:green; height: 100%"></object>';
}

<div>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a id="rbCodeMenu" class="nav-link" href="#" onclick="load_RbCode(event)">Rule Builder Code</a>
    </li>
    <li class="nav-item">
      <a id="helpModalCodeMenu" class="nav-link" href="#" onclick="load_HelpModalCode(event)">Help Modal</a>
    </li>
  </ul>
  <div id="rbCode"></div>
  <div id="helpModalCode"></div>
</div>

mylee · Accepted Answer · 2019-02-19 09:30:12Z

Your code only displays the information when it is clicked but it does not hide the other tab content (or clear the content) when a tab is clicked.

Edit: same as what was mentioned by ADyson in the comment

function load_RbCode() {
    //clear the other tab content
    document.getElementById("helpModalCode").innerHTML = "";
    document.getElementById("rbCode").innerHTML='<object type="text/html" data="functionality.html" style="width: 100%; height: -webkit-fill-available"></object>';
}

function load_HelpModalCode() {
    //clear the other tab content
    document.getElementById("rbCode").innerHTML = "";
    document.getElementById("helpModalCode").innerHTML='<object type="text/html" data="help_modal.html" style="width: 100%; height: -webkit-fill-available"></object>';
}

Dan Nagle · Accepted Answer · 2019-02-19 10:37:03Z

You need to clear the content of the div element which you are not using.

This isn't related to your issue but when you feed the innerHTML() method a string of text containing HTML markup it is converted to a DocumentFragment object representing the new DOM nodes for the HTML elements. You can do this yourself in JavaScript and when you bundle the code into a function you have cleaner and more performant code.

function addObjectElement (containerElem, contentUrl) {
  // Create a new `object` element 
  var newElement = document.createElement("object");
  // Set the element attributes
  newElement.setAttribute("type", "text/html");
  newElement.style.cssText = "width: 100%; height: -webkit-fill-available";
  newElement.setAttribute("data", contentUrl);
  // Clear the container element if it's populated
  if (containerElem.hasChildNodes())
    containerElem.innerHTML = "";
  // Add the new element to the container
  containerElem.appendChild(newElement);
}

function load_RbCode(event) {
  event.preventDefault();
  // Clear `#helpModalCode`
  document.getElementById("helpModalCode").innerHTML = "";
  // Populate `#rbCode`
  addObjectElement(document.getElementById("rbCode"), "functionality.html");
}

function load_HelpModalCode(event) {
  event.preventDefault();
  // Clear `#rbCode`
  document.getElementById("rbCode").innerHTML = "";
  // Populate `#helpModalCode`
  addObjectElement(document.getElementById("helpModalCode"), "help_modal.html");
}

<div>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a id="rbCodeMenu" class="nav-link" href ="#" onclick="load_RbCode(event)">Rule Builder Code</a>
    </li>
    <li class="nav-item">
      <a id="helpModalCodeMenu" class="nav-link" href ="#" onclick="load_HelpModalCode(event)">Help Modal</a>
    </li>
  </ul>
  <div id="rbCode"></div>
  <div id="helpModalCode"></div>
</div>

Mohit Gupta · Accepted Answer · 2019-02-19 09:31:37Z

Use this below code: your option tag is blank.. so its not showing.. when you put some value in it.. your code also show this.

        function load_RbCode() {
            document.getElementById("rbCode").innerHTML='<object type="text/html" data="functionality.html" style="width: 100%; height: -webkit-fill-available;background:red;">one</object>';
        }
    
        function load_HelpModalCode() {
            document.getElementById("helpModalCode").innerHTML='<object type="text/html" data="help_modal.html" style="width: 100%; height: -webkit-fill-available;background:blue;">two</object>';
        }

    <div>
        <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a id="rbCodeMenu" class="nav-link" href ="#" onclick="load_RbCode()">Rule Builder Code</a>
                </li>
                <li class="nav-item">
                    <a id="helpModalCodeMenu" class="nav-link" href ="#" onclick="load_HelpModalCode()">Help Modal</a>
                </li>
        </ul>
        <div id="rbCode">text</div>
        <div id="helpModalCode">tst2</div>
    </div>

Hajan · Accepted Answer · 2019-02-19 09:34:01Z

-2

Try Jquery.

Add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> and then $('#rbCode').html('<object type="text/html" data="functionality.html" style="width: 100%; height: -webkit-fill-available"></object>');

answered Feb 19, 2019 at 9:34

Hajan

757 bronze badges

2 Comments

Mark Baijens Over a year ago

Implement a complete library to fix one issue is bad advice in my opinion.

ADyson Over a year ago

Not only that, the answer doesn't explain what it thinks the issue is, or why this code would fix it. IMO the proposed code wouldn't resolve anything in this case. All it does is pointlessly add a whole new code library to the solution.

Collectives™ on Stack Overflow

innerHTML Not Changing in Javascript onClick

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related