innerHTML 在 JS 中无法使用类名

innerHTML not working with classname in JS

本文关键字：JS innerHTML      更新时间：2023-09-26

我的下拉列表选择特定值- 

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

让我知道为什么这不起作用，我做错了什么？

document.getElementsByClassName("catlink")选择网页中的所有元素作为数组，因此您必须使用 [0]

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

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

function showDiv( discselect ) {
    if( discselect === 1)    {
      document.querySelector(".catlink").innerHTML = "aaaaaaqwerty";
    }
}
相关文章：