CODEWITHSUNDEEP
javascripthtml
murday1983
murday1983

Reputation: 4016

innerHTML Not Changing in Javascript onClick

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

Upvotes: 0

Views: 1875

Answers (5)

Dan Nagle
Dan Nagle

Reputation: 5425

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>

Upvotes: 1

Hajan
Hajan

Reputation: 75

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>');

Upvotes: -2

Mohit Gupta
Mohit Gupta

Reputation: 739

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>

Upvotes: 0

mylee
mylee

Reputation: 1333

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>';
}

Upvotes: 2

brk
brk

Reputation: 50291

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>

Upvotes: 2

Related Questions