使用this.innerHTML的第二个onclick事件上的Uncaught TypeError

Question

大家好，我有一个很奇怪的问题。

在HMTL无约束列表中，我有几个带有onClick事件的列表元素，它们都调用相同的函数。

<ul>
    <li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">1</li>
    <li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">2</li>
    <li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">3</li>
    <li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">4</li>
    <li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">5</li>
    <li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">6</li>
    <li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">7</li>
    <li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">8</li>
    <li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">9</li>
    <li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">0</li>
</ul>

这是Javascript函数：

function show(ID){
    show = document.getElementById(ID);
    notShow = document.getElementsByClassName("visible")[0];
    if (typeof notShow !== "undefined"){
        notShow.classList.toggle("hidden");
        notShow.classList.toggle("visible");
    }               
    show.classList.toggle("hidden");
    show.classList.toggle("visible");
}

由于某种未知的原因，当我第一次单击其中一个<li>元素时，该函数运行良好，但第二次单击时，我会得到一个错误：

未捕获的类型错误：对象不是函数ACNL.php：31

我认为错误不在javaScript函数内部，而是在调用该函数的HTML元素中。

任何帮助都将不胜感激！

Answer 1

我在这里看到了一些问题。无特殊顺序：

• 将内部变量名称show更改为其他名称可能是最安全的，因为您的函数也称为show(...)
• 使用var关键字声明变量，以避免填充顶部命名空间
• 您正在按ID检索DOM元素，但您的DOM元素（在上面的示例中）都没有ID属性。您至少需要将它们添加到li项目中，例如id="1"
• 如果这些元素一开始没有visible，那么在"切换"时将同时添加visible和hidden
• 如果在li项上切换visible和hidden，则notShow = document.getElementsByClassName("visible")[0];可能会发生更改，因为一旦li项中包含visible，您将检索它们。请尝试使用其他类名或元素类型

这里有一个jsFiddle让您开始（忽略特定于jsFiddl的window.show定义）。