innerHTML在JS中无法与类名一起使用

Question

我要创建下拉列表以选择特定的值 -

<select name="category" id="category" onChange="showDiv(this.value);" >
    <option value="">Select This</option>
    <option value="1">Nokia</option>
    <option value="2">Samsung</option>
    <option value="3">BlackBerry</option>
    </select>

这是我想要显示文本的div

<span class="catlink"> </span>

以下是我的JS函数 -

    function showDiv( discselect )
    {

    if( discselect === 1)
    {
    alert(discselect); // This is alerting fine
    document.getElementsByClassName("catlink").innerHTML = "aaaaaaqwerty"; // Not working
    }

}

请告诉我为什么这个不起作用，以及我做错了什么？

- swapnesh

Answer 1

document.getElementsByClassName("catlink") 会选择网页中的所有元素，因此您需要使用[0]

 function showDiv( discselect ) 
 { 

 if( discselect === 1) 
 { 
 alert(discselect); // This is alerting fine 
 document.getElementsByClassName("catlink")[0].innerHTML = "aaaaaaqwerty"; // Now working 
 } 
 }

- user1432124

---

感谢您提供的代码和解决方案，只需要再添加一个，我需要将“ ===”替换为“ ==”以使我的代码正常工作。请进一步解释一下使用[0]的原因，因为我完全不知道这个。 - swapnesh

[0]会选择页面上具有类别链接的第一个元素 - user1432124

那么现在如果我在页面上有多个名为catlink的span类，那么我可以使用[0]，[1]来插入文本吗？哇，这真是太好了！ :) - swapnesh

你也可以通过 document.getElementsByClassName("catlink").length 获取元素的总数。 - user1432124

Answer 2

您正在使用 getElementsByClassName 创建一个 nodeList（一种特殊的节点数组）。或者，您可以使用 document.querySelector，它将返回第一个具有 className .catlink 的元素：

function showDiv( discselect ) {
    if( discselect === 1)    {
      document.querySelector(".catlink").innerHTML = "aaaaaaqwerty";
    }
}

- KooiInc