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

Question

在显示 div 选项卡内容的带有 onclick 函数 (example here) 的导航菜单上，我想传递一个附加值以加载特定内容。这是当前代码：

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

这是 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);
}

我无法获得 div 中的第三个变量。我可以使用 alert(ThirdValue); 看到它，但是使用 <script>document.write(ThirdValue)</script> 我无法在 html.

中添加它

我需要在 html 中添加这个值。如何在 html?

中打印/附加此值

Answer 1

你不应该使用 document.write，因为它只在 DOM 加载时工作，在 DOM 准备好后，它就不会工作了。

而是在 html 中放置一个占位符（例如：<p>London is the {var} city of England.</p>），并将其替换为 ThirdValue。方法如下：

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

完整代码：

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>

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

How to print / append on the middle of the html div a value from a button click?

html

javascript

css

jquery

navbar