Level 7
id should be unique within html document. So use class instead of id.
Dec 14, 2022
27
Level 10
JavaScript getElementByID() not working
Why does timestamp get null in the following JavaScript code?
@foreach($products as $product)
<p id="timestamp">{{ $product->timestamp }}</p>
@endforeach
js
let startTime = document.getElementById("timestamp");
I see this demo.
NaN : NaN : NaN
Level 39
IDs should be unique and so you don't want to set it within a loop like this or else they will be duplicated. Beyond that, is it possible that $products is null?
Level 10
I changed these codes but my problem did not solve yet.
let startTime = document.getElementsByClassName("timestamp");
blade
@foreach($products as $product)
<p class="timestamp">{{ $product->timestamp }}</p>
@endforeach
demo
NaN : NaN : NaN
Level 73
@webaxin This document.getElementsByClassName("timestamp"); returns an array of elements, so you need to get the content of the object.
let timestamps = document.getElementsByClassName("timestamp");
timestamps.forEach(function(timestamp) {
console.log(timestamp.innerHTML);
} )
I suggest checking this plain-js-helper out https://github.com/Tray2/plain-js-helper/blob/main/helper.js
Level 10
Level 73
@webaxin Then you are only fetching one element. Show you complete code, html and js, and tell us what you want to happen,
Level 10
I changed these codes but my problem did not solve yet.
blade
@foreach($products as $product)
<p class="timestamp">{{ $product->timestamp }}</p>
@endforeach
js
let timestamps = document.getElementsByClassName("timestamp");
Array.from(timestamps).forEach(function(timestamp) {
console.log(timestamp.innerText)
});
b err
Level 73
@webaxin Did you read my previous reply?
Level 10
@Tray2 yes
Level 73
@webaxin Did you understand what I wrote?
Level 102
@webaxin .. you are using timestamp outside the function.
collection[i].innerText = (`${timestamp-curTime}`).toHHMMSS();
Level 73
@Sinnbeck I'm guessing that is a calculation.
Level 102
@Tray2 Ahh makes sense :) Silly me. Fixed. But still out of scope.
Level 73
This makes no sense.
let timestamps = document.getElementsByClassName("timestamp");
Array.from(timestamps).forEach(function(timestamp) {
console.log(timestamp.innerText)
});
timestamps is list of objects here, so there is no need to convert it to an array, use a for loop on it.
let els = document.getElementsByClassName('item');
for (let i = 0; i < els.length; i++) {
console.log(els[i].innerHTML);
}
Level 10
Level 73
@webaxin And that is what you expected?
Level 10
@Tray2 yes
Level 73
@webaxin Good, then you problem is solved?
Level 10
@Tray2 No, I see this demo again
NaN : NaN : NaN
Level 10
can you help me?
Level 73
@webaxin 42 is the solution.
Level 102
@webaxin How would anyone be able to guess why its giving you NaN. You said it showed some numbers.. not it shows NaN.. How are we supposed to guess what you changed to break it?
Level 10
blade
<p class="timestamp fw-bolder text-danger text-end">{{ $product->amazing->timestamp }}</p>
js
<script>
String.prototype.toHHMMSS = function(time) {
let sec_num = parseInt(time, 10);
let hours = Math.floor(sec_num / 3600);
let minutes = Math.floor((sec_num - (hours * 3600)) / 60);
let seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
return hours + " : " + minutes + " : " + seconds;
}
let timestamps = document.getElementsByClassName("timestamp");
Array.from(timestamps).forEach(function(timestamp, index) {
setInterval(() => {
let curTime = (new Date()).getTime() / 1000;
document.getElementsByClassName('timestamp')[index].innerText = (`${timestamp-curTime}`).toHHMMSS();
}, 1000)
});
</script>
I see this NuN for all.
Level 73
@webaxin That is because you are not sending a value into your function that can be converted to a number.
Level 10
@Tray2 how to send a value into my function that can be converted to a number?
Level 73
@webaxin use the typeof function to find out what type of variable you are sending into the function
let el = document.querySelector('body');
console.log(typeof(el));
The above code would say object
Level 75
It's just a continuation of this thread.
1 like
Please or to participate in this conversation.