如何通过单击按钮在html div的中间打印/附加一个值？

Question

On a nav menu with onclick function (example here) that displays a div tab content I would like to pass an additional value to load a specific content. This is the current code:

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London', 'capital')">London</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris', 'France')">Paris</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo', 'Japan')">Tokyo</a></li>
</ul>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the <script>document.write(ThirdValue)</script> city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of <script>document.write(ThirdValue)</script>.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of <script>document.write(ThirdValue)</script>.</p>
</div>

And this is the Javascript:

function openCity(evt, cityName, ThirdValue) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
   }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";

  alert(ThirdValue);
}

I am not able to get the third variable within the div. I am able to see it with alert(ThirdValue); , but using <script>document.write(ThirdValue)</script> I am not able to add it within the html.

I need to add this value within the html. How can I print / append this value within the html?

Answer 1

You shouldn't use document.write , since it is only working while the DOM is loading, after the DOM is ready, it won't work.

Instead place a placeholder inside the html (eg: <p>London is the {var} city of England.</p> ), and replace it with ThirdValue . Here is how:

var text = document.getElementById(cityName).querySelector('p');
text.innerHTML = text.innerHTML.replace('{var}',ThirdValue);

Full code:

 function openCity(evt, cityName, ThirdValue) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the link that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; var text = document.getElementById(cityName).querySelector('p'); text.innerHTML = text.innerHTML.replace('{var}',ThirdValue); } 

 <ul class="tab"> <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London', 'capital')">London</a></li> <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris', 'France')">Paris</a></li> <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo', 'Japan')">Tokyo</a></li> </ul> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the {var} city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of {var}.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of {var}.</p> </div>