4

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.net/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>

`

haldo
  • 14,512
  • 5
  • 46
  • 52
jan
  • 235
  • 1
  • 2
  • 12
  • 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 Feb 24 '19 at 18:13
  • That i actually knew. don't know how it slipped through my mind. – jan Feb 24 '19 at 18:59

4 Answers4

3

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";
    }
}
clurd
  • 116
  • 1
  • 5
2

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>
haldo
  • 14,512
  • 5
  • 46
  • 52
  • Thank you, this code worked very fine. I changed the id to class, even tho the result was the same if i kept it as id classes... wonder why. – jan Feb 24 '19 at 18:57
  • Hello Haldo. I just came up with an issue on this script. If date exist then add class name "today". But if the script cant find the date, it will give me an error on all the others script on the page. So if the script cant find a date, then i want it to do nothing. Is it here i should use a "else" statement? – jan Feb 28 '19 at 23:22
  • @jan what error does it produce or what happens in the other scripts? If it can't find the date then it should never enter the `if` statement. – haldo Feb 28 '19 at 23:53
1

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.com/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>
Yogesh
  • 150
  • 1
  • 4
  • 20
  • FYI normally if the question uses javascript, then the answer should be in javascript. However in this case the OP tagged it as a jQuery question (even though it was possibly a mistake) so I upvoted this answer for anyone searching for a jQuery solution. – FluffyKitten Feb 24 '19 at 18:19
  • 1
    This doesn't actually answer any part of the question, though. – Daniel Beck Feb 24 '19 at 18:20
  • Ok, I just suggested ! Thanks @FluffyKitten – Yogesh Feb 24 '19 at 18:24
  • 2
    Daniel makes a good point - while the duplicate id is the cause of the issue, you should expand your answer to explain to the OP how they can use `$('.mydivid')` to get and add to the class names. – FluffyKitten Feb 24 '19 at 18:27
0

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.com/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>
Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
  • Thank you, that was an easy solution except that the script was meant to determine if the date was today, if it was, then it would add the .today class. – jan Feb 24 '19 at 18:55
  • Yes; that portion of your code already seemed to be working so I focused on the parts that weren't. – Daniel Beck Feb 24 '19 at 19:05