innerHTML not working with classname in JS

Question

My drop down List to select particular value-

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

This is the div where i want to show the text

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

And this is my JS function -

    function showDiv( discselect )
    {

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

}

Let me know why this is not working, and what i am doing wrong?

user1432124 · Accepted Answer · 2012-06-01 05:56:32Z

17

document.getElementsByClassName("catlink")is selecting all the elements in webpage as array therefore you have to use [0]

 function showDiv( discselect ) 
 { 

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

answered Jun 1, 2012 at 5:56

user1432124

Sign up to request clarification or add additional context in comments.

5 Comments

swapnesh Over a year ago

Thanks for the code and solution, just one more to add, i need to replace "===" to "==" to make my code working fine. kindly explain it little further the use of [0] as i was totally unaware of this

user1432124 Over a year ago

[0] will select the first element on the webpage having class catlink

swapnesh Over a year ago

So now if i have more than span classes named catlink on my page then can i insert text using those [0] , [1] ?? ..wow thats really g8 info :)

user1432124 Over a year ago

you can also get the total no. of element by document.getElementsByClassName("catlink").length

Nuno Bentes Over a year ago

Perfect, it works! :) Simple and nice explanation.

KooiInc · Accepted Answer · 2012-06-01 06:18:29Z

4

You ar creating a nodeList (a special array of Nodes) using getElementsByClassName. Alternatively you can use document.querySelector, which returns the first element with className .catlink:

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

answered Jun 1, 2012 at 6:18

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Collectives™ on Stack Overflow

innerHTML not working with classname in JS

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related