I´m trying to compare several divs with a class and a value, only works when i do it with id, can´t figure out how to do it by class name
This isn´t working
<body>
<div id="horarios">
<div class="demo" value="5:40:55">Le valor</div>
<div class="demo" value="5:40:55">Le valor1</div>
<div class="demo" value="5:40:55">Le valor2</div>
</div>
<script>
var regex = new RegExp(':', 'g'),
timeStr1 = '5:50:55',
timeStr2 = document.getElementById("horarios").classList.contains('demo').getAttribute('value');
if(parseInt(timeStr1.replace(regex, ''), 10) < parseInt(timeStr2.replace(regex, ''), 10)){
console.log('timeStr1 is smaller then timeStr2');
} else {
console.log('timeStr2 is smaller then timeStr1');
}
</script>
</body>
This is working
<body>
<div id="demo" value="5:40:55">Le valor</div>
<script>
var regex = new RegExp(':', 'g'),
timeStr1 = '5:50:55',
timeStr2 = document.getElementById('demo').getAttribute('value');
if(parseInt(timeStr1.replace(regex, ''), 10) < parseInt(timeStr2.replace(regex, ''), 10)){
console.log('timeStr1 is smaller then timeStr2');
} else {
console.log('timeStr2 is smaller then timeStr1');
}
</script>
</body>
Thank you
You should be able to use document.getElementsByClassName instead. Your problem is that the contains function returns a Boolean (see the documentation for more details). This means that the getAttribute cannot work since it expects a Node instead of a Boolean.
This should work:
timeStr2 = document.getElementsByClassName("demo");
Note that this will be an array of elements, so if you only want the value of the first element, use this instead
timeStr2 = document.getElementsByClassName("demo")[0].getAttribute("value");
Update after seeing the comments. You should use a loop to check every value one after another:
document.getElementsByClassName("demo").forEach((currentElement) => {
const timeString = currentElement.getAttribute("value");
if (parseInt(timeString .replace(regex, ""), 10) < parseInt(timeString .replace(regex, ""), 10)) {
console.log(currentElement.innerText + " is smaller than timeStr2");
} else {
console.log("timeStr2 is smaller than " + currentElement.innerText);
}
});
Well it's normal that it doesn't work, as classList returns a list of the classes of a specific elements, not it's children.
You could use querySelectorAll for that purpose:
var demos = document.querySelectorAll("div.demo");
This would be a list of elements, that you can later on check by classes and whatever you need.
Let me know if I misunderstood the question, but to apply the code to any element with the class of demo, this should work:
<body>
<div id="horarios">
<div class="demo" value="5:50:54">Le valor</div>
<div class="demo" value="5:50:56">Le valor1</div>
<div class="demo" value="5:50:55">Le valor2</div>
</div>
<script>
const demos = document.querySelectorAll(".demo");
demos.forEach((demo) => {
let regex = new RegExp(":", "g");
let timeStr1 = "5:50:55";
let timeStr2 = demo.getAttribute("value");
if (
parseInt(timeStr1.replace(regex, ""), 10) <
parseInt(timeStr2.replace(regex, ""), 10)
) {
console.log("timeStr1 is smaller then timeStr2");
} else {
console.log("timeStr2 is smaller then timeStr1");
}
});
</script>
</body>