innerHTML有时会起作用，有时候不会吗？

Question

当您单击Capacitor 10pf时，本页顶部的文本http://acsoundstudio.com/bb/2520dip8/应该会更改，但是然后单击39pf会更改背景中的图像，但不会更改10pf到39pf。它保持在10pf。

我不确定是什么导致了这一点。以下是一些示例代码：

HTML：

<li>
    <a href="javascript:void(0)">Capacitors | pF</a>

        <ul class="dl-submenu">
          <li><a href="javascript:void(0)" onclick='topCap1()'>10pf</a></li>

          <li><a href="javascript:void(0)" onclick='topCap2()'>39pf</a></li>

          <li><a href="javascript:void(0)" onclick='topCap3()'>47pf</a></li>

          <li><a href="javascript:void(0)" onclick='topCap4()'>1000pf</a></li>
        </ul>
</li>

JS：

function topCap1() {
  document.getElementById('bbtop').src = "img/2520dip8_c1_10pf.png";
  document.getElementById('bbdefine').innerHTML = "10pf Capacitor";
}

function topCap2() {
  document.getElementById('bbtop').src = "img/2520dip8_c2_39pf.png";
  document.getElementById('bbdefine').innerHTML = "39pf Capacitor";
}

function topCap3() {
  document.getElementById('bbtop').src = "img/2520dip8_c4-5_47pf.png";
  document.getElementById('bbdefine').innerHTML = "47pf Capacitors";
}

function topCap4() {
  document.getElementById('bbtop').src = "img/2520dip8_c6_1000pf.png";
  document.getElementById('bbdefine').innerHTML = "1000pf Capacitor";
}

此外，如果您对简化此代码有任何想法，我将非常感激。

Answer 1

这是一个更轻松的方法。只需添加后台逻辑。的 Live demo (click).

<div id="bbtop"></div>
<div id="bbdefine"></div>
<ul class="dl-submenu">
  <li><a>10pf</a></li>
  <li><a>39pf</a></li>
  <li><a>47pf</a></li>
  <li><a>1000pf</a></li>
</ul>

JavaScript的：

var bbdefine = document.getElementById('bbdefine');

var elems = document.querySelectorAll('.dl-submenu li a');

for (var i=0; i<elems.length; ++i) {
  elems[i].addEventListener('click', clickFunc);
}

function clickFunc(event) {
  bbdefine.textContent = this.textContent+' Capacitor';
}

内联JS（比如onclick和你的html中的js hrefs）从来都不是一个好习惯。相反，使用javascript附加事件侦听器。我建议您阅读以下部分结果： Why is inline js bad?

如果您需要支持旧浏览器，请测试此代码并检查控制台是否存在错误，然后填充任何不可用的内容。不幸的是，addEventListener并不总是存在。