Javascript - Add element id using for loop

Question

I'm trying to update a set of divs class="oct_days" to give them id based on :nth-child(n). The format of the id is oct_n. I'm trying to accomplish this using a for loop to set this for divs.

window.onload = function addOctDate() {
    var cls = document.getElementByClass("oct_days");
    for (var n = 1; n < 32; n++) {
        cls[n].id = "oct_" + n;
    }
};

Fiddle (http://jsfiddle.net/ascottz/D9Exm/)

The idea is to have .oct_days:nth-child(1) have id="oct_1", but id isn't being set.

If you intend to set an attribute, it's better to do it explicitly with setAttribute. This isn't necessary for id, but means your code will be more uniform across DOM manipulations — Paul S.
– Paul S., Commented Oct 9, 2013 at 1:39

Fisch · Accepted Answer · 2013-10-09 01:58:30Z

3

clsyour issues are this:

window.onload was being run before your html was initialized
you need to call document.getElementsByClassName not
you are starting your iteration at 1, indexes are 0 based and you should start there and add the + 1 as noted below
also, while iterating, its good to only iterate only over the known items in your list

try this code:

function addOctDate() {
        var cls = document.getElementsByClassName("oct_days"); 
        for (n=0, length = cls.length; n < length; n++) {
            cls[n].id= "oct_" + (n + 1); 
        }
    }; 

addOctDate()

edited Oct 9, 2013 at 1:58

answered Oct 9, 2013 at 1:48

Fisch

3,8151 gold badge30 silver badges38 bronze badges

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

Comments

Matti Virkkunen · Accepted Answer · 2013-10-09 01:37:00Z

2

The function is getElementsByClassName.

The fiddle doesn't work because you're seeing window.onload while your code is already being run inside that event (the dropdown on the left says onLoad). It'll also error out because you don't have 31 elements in the HTML, but it'll still set the IDs.

answered Oct 9, 2013 at 1:37

Matti Virkkunen

65.4k9 gold badges138 silver badges162 bronze badges

Comments

Jay Harris · Accepted Answer · 2013-10-09 01:53:41Z

1

Your code is very simple to fix

(function () {

  // .getElementsByClassName not .getElementByClass
  var cls = document.getElementByClassName("oct_days"),
  // set the stopping point DYNAMICALLY
      len = cls.length,
  // start the index at 0;
      n = 0;
  for (; n < len; n++) {
    cls[n].id = "oct_" + (n + 1);
  }
// ()(); auto runs the function 
})();

edited Oct 9, 2013 at 1:53

answered Oct 9, 2013 at 1:48

Jay Harris

4,27120 silver badges22 bronze badges

Comments

jaguarj · Accepted Answer · 2017-11-19 22:52:48Z

Here is a way to add ids to elements and classes using just plain js.

HTML

<div id="test">
    Content will append below!
    <input type="button" value="click me!" onClick="myFunction();"/>
</div>

CSS

.cool_0 {
    background: red;
    height: 200px;
    width: 100%;
}
.cool_1 {
    background: yellow;
    height: 200px;
    width: 100%;
}
.cool_2 {
    background: red;
    height: 200px;
    width: 100%;
}
.cool_3 {
    background: yellow;
    height: 200px;
    width: 100%;
}
.cool_4 {
    background: red;
    height: 200px;
    width: 100%;
}
.cool_5 {
    background: yellow;
    height: 200px;
    width: 100%;
}

JS

function myFunction(){
        var myId = 0;
        var counter = 0;
        var myDiv = document.getElementById("test")
        for(var i = 0; i < 5; i++){
            var textNode = document.createTextNode("sup! My current id is "+myId+" !")
            var t = document.createElement("div");
            t.setAttribute("id", counter++)
            t.setAttribute("class", "cool_"+myId++)
            t.appendChild(textNode)
            myDiv.appendChild(t);
        }
    }

Collectives™ on Stack Overflow

Javascript - Add element id using for loop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related