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>元素时，该函数正常工作，但第二次我这样做时出现错误：

Uncaught TypeError：object不是函数ACNL.php：31

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

任何帮助将不胜感激！

Answer 1

我在这看到一些问题。没有特别的顺序：

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

这是一个jsFiddle来帮助你入门（忽略特定于jsFiddle的window.show定义）。

使用this.innerHTML在第二个onclick事件上未捕获TypeError

1 个答案: