I am trying to make this script to target both of my class element with the same class name, but it is only targeting the first one. How can i make it to target both or all classes with same class name?

/`

var d = new Date();
var month = d.getMonth() + 1; //.getMonth() is 0-11
var day = d.getDate();

if (day < 10) {
  day = '0' + dd;
}

if (month < 10) {
  month = '0' + month;
}

if (document.getElementsByClassName( 'date-display-single day' )[0].innerHTML == `${day}.${month}`) {
  document.getElementById("mydivid").className += " today";
}

.today {
  border: 2px solid red;
  color: red;
}

<div id="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

<div id="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

I am trying to make this script to target both of my class element with the same class name, but it is only targeting the first one. How can i make it to target both or all classes with same class name?

https://jsfiddle/cprtkhmd/2/`

var d = new Date();
var month = d.getMonth() + 1; //.getMonth() is 0-11
var day = d.getDate();

if (day < 10) {
  day = '0' + dd;
}

if (month < 10) {
  month = '0' + month;
}

if (document.getElementsByClassName( 'date-display-single day' )[0].innerHTML == `${day}.${month}`) {
  document.getElementById("mydivid").className += " today";
}

.today {
  border: 2px solid red;
  color: red;
}

<div id="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

<div id="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

`

• javascript
• getelementsbyclassname

• 1 Always always always remember that IDs are unique identifiers so they must be unique. You cannot have 2 elements with the same id mydivid – FluffyKitten Commented Feb 24, 2019 at 18:13
• That i actually knew. don't know how it slipped through my mind. – jan Commented Feb 24, 2019 at 18:59

4 Answers 4

The issue you're having is that you have non-unique id attributes on the page. All id values should be unique to the DOM.

See below for an example of getting around this by referencing the parent node instead. Essentially, you can loop through all elements with that given class name and access the parentNode property to access its parent to modify the CSS.

var elements = document.getElementsByClassName( 'date-display-single day' );

for(var i=0; i<elements.length; i++) {
    if(elements[i].innerHTML == `${day}.${month}`) {
        elements[i].parentNode.className += " today";
    }
}

You're close but you just need to add a loop and change the HTML slightly. Element IDs should be unique in HTML, so I suggest updating to <div class="mydiv">.

I've added a loop in your code and change the selector to getElementsByClassName. Doing this means you get a collection of divs that you can iterate through and set class. My example iterates through the divs then checks the condition for each:

var mydivs = document.getElementsByClassName("mydiv");
for(var i = 0; i < mydivs.length; i++) {
  if (mydivs[i].children[0].innerHTML == `${day}.${month}`) {
     mydivs[i].className += " today";
  }
}

Please see the updated snippet below:

var d = new Date(2019, 1, 24);
var month = d.getMonth() + 1; //.getMonth() is 0-11
var day = d.getDate();

if (day < 10) {
  day = '0' + dd;
}

if (month < 10) {
  month = '0' + month;
}

 var mydivs = document.getElementsByClassName("mydiv");
 for(var i = 0; i < mydivs.length; i++) {
     if (mydivs[i].children[0].innerHTML == `${day}.${month}`) {
        mydivs[i].className += " today";
     }
 }

.today {
  border: 2px solid red;
  color: red;
}

<div class="mydiv">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

<div class="mydiv">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

You can not have more than one element with same id in html. you should use class insted of

<div id="mydivid"> 

Use Jquery to change value of elements which having same class name.

$('.mydivid')

sample code as below

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d = new Date();
var month = d.getMonth() + 1; //.getMonth() is 0-11
var day = d.getDate();

if (day < 10) {
  day = '0' + dd;
}

if (month < 10) {
  month = '0' + month;
}

if (document.getElementsByClassName( 'date-display-single day' )[0].innerHTML == `${day}.${month}`) {
$(".mydivid").addClass("today");
 // document.getElementById("mydivid").className += " today";
}


});
</script>
<style>
.today {
  border: 2px solid red;
  color: red;
}
</style>
</head>
<body>
<div class="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

<div class="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

</body>
</html>

getElementsByClassName returns an array-like list structure. When you use [0] on it, you're operating on the first element in that list. To operate on all of them, iterate through the list as you would any array.

There are some other issues with your code, though: duplicate IDs aren't allowed within a document, so you won't be able to access the multiple '#mydivid' elements. Since you're already iterating through the individual child elements, it would probably be easier to target the parent (using el.parentNode) instead of depending on an ID:

for (el of document.getElementsByClassName('date-display-single day')) {
  // removing the Date stuff, since it's not directly relevant to the question
  if (el.innerHTML === '24.02') {
    el.parentNode.className += " today"
  }
}

.today {
  border: 2px solid red;
  color: red;
}

<div><div class="date-display-single day">22.02</div></div>
<div><div class="date-display-single day">23.02</div></div>
<div><div class="date-display-single day">24.02</div></div>
<div><div class="date-display-single day">24.02</div></div>
<div><div class="date-display-single day">25.02</div></div>

Since this was tagged jQuery, here's a one-liner jQuery equivalent to the above:

$('.date-display-single.day:contains("24.02")').parent().addClass('today')

.today {
  border: 2px solid red;
  color: red;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><div class="date-display-single day">22.02</div></div>
<div><div class="date-display-single day">23.02</div></div>
<div><div class="date-display-single day">24.02</div></div>
<div><div class="date-display-single day">24.02</div></div>
<div><div class="date-display-single day">25.02</div></div>