CODEWITHSUNDEEP
javascripthtmlhtml-lists
user3081129
user3081129

Reputation: 1

JS does nothing... trying to change a class in a <ul> <li>

I can't get anything to change the "class" attribute with JS... I've searched for several hours, can't see anything else to try.... here's the source: (note I'm doing this on my laptop, locally... 

   <html>
    <head>
        <title>jS chg class</title>
    </head>
    <script>
    var listitems = document.getElementsByTagName("li");
    for (int i = 0; i < listitems.length; i++)
     {
      if (listitems[i].className == "trash")
      {
       listitems[i].className = "keep";
       break;
      }
    }
    </script>
    <body>


        <div id="junk">


            <span id="categorylabel">Closet Junk:</span>
            <ul id="junklist">
                <li class="trash">books</li>
                <li class="trash">shoes</li>
                <li class="trash">clothes</li>
            </ul>
            </div>
    </body>
     </html>

Upvotes: 0

Views: 70

Answers (4)

Yourim Yi
Yourim Yi

Reputation: 198

as gurvinder372 comment... put <script> tags to end of <body>'s bottom.

and. Thinker's answer (change int to var in your for loop)

<html>
  <head>
    <title>jS chg class</title>
  </head>
  <style>
    .trash { color : red; }
  </style>
<body>

<div id="junk">
  <span id="categorylabel">Closet Junk:</span>
  <ul id="junklist">
      <li class="trash">books</li>
      <li class="trash">shoes</li>
      <li class="trash">clothes</li>
  </ul>
</div>

<script> ///// HERE
  var listitems = document.getElementsByTagName("li");
  for (var i = 0; i < listitems.length; i++) // and HERE
  {
    if (listitems[i].className == "trash")
    {
      listitems[i].className = "keep";
      break;
    }
  }
</script>

</body>
</html>

Upvotes: 2

brk
brk

Reputation: 50346

Here are the following issues.

  1. You have put the js inside head tag. When this will be parsed there wont be any DOM element li. If you want to keep it inside head put it inside window.onload

  2. Like java there is no variable type declaration in javascript. All variables of any type be it string or number or anything else is declared using var keyword

  3. When you are using the break keyword, your logic will only match the first element and will come out of the loop. So you may need to remove the break keyword

Check this snippet

var listitems = document.getElementsByTagName("li");
    for (var i = 0; i < listitems.length; i++){
      if (listitems[i].className == "trash")
      {
       listitems[i].className = "keep";
       //break;
      }
    }

JSFIDDLE

Note: Un-comment break in the jsfiddle to replicate the issue

Upvotes: 0

MHS
MHS

Reputation: 931

You must apply Javascript after document is ready.

Try this:

(function() {
    ...
    your script
    ...
})();

Here is the jsfiddle

Upvotes: 1

Arun AK
Arun AK

Reputation: 4380

use var instead of int in the for loop like this:

var listitems = document.getElementsByTagName("li");
for (var i = 0; i < listitems.length; i++) {
  if (listitems[i].className == "trash") {console.log("sdfg")
     listitems[i].className = "keep";
     break;
  }
}

Here is the jsFiddle

Upvotes: 2

Related Questions