Level 102
Is this in a script tag on the page or in a js file?
What if you test it on another element like the body?
Or can you recreate it here? https://jsfiddle.net/s9rw4uyv/ My own test works as expected
Oct 18, 2022
4
Level 2
Cannot access DOM element properties
Hello, I know this isn't a JS dedicated forum but I also know you guys are reactive.
Inside a AlpineJS init function, I'm accessing a DOM element by ID. This element is static, loaded inside a Blade template. I can console.log the element and see all the properties, including clientWidth (value = 161). But when I try console.log(container.clientWidth), the value is 0. Strangely, I can access some properties but not all of them (offsetWidth, offsetTop, all 0).
Here is some samples of my code:
document.addEventListener('alpine:init', () => {
Alpine.data('booking', () => ({
bookings: [],
init: function() {
let container = document.getElementById('slot-'+bookings[i]['resource_id']);
console.log(container); // Returns the full properties
console.log(container.clientWidth); // Returns 0
[...]
Extract of container properties inside the console:
[...]
className: "inline-block mr-3 cursor-pointer hover:bg-gray-100 h-3 border-t"
clientHeight: 11
clientLeft: 0
clientTop: 1
clientWidth: 161
[...]
offsetHeight: 12
offsetLeft: 185
offsetParent: div.p-3.w-full.border-y.relative
offsetTop: 141
offsetWidth: 161
[...]
If I run a console.log(container.className) instead, I get the correct value.
I really don't get it.
If you have any idea, that'd be appreciated. I'm maybe just very tired and missing something ... Thanks
Level 2
@Sinnbeck Hi and thanks.
The script is loaded inline via a @push laravel directive and injected right before so it is the last thing loaded normally.
As for your question, I tried the same with a fake-id on a H1 and same issue (🙄)
let test = document.getElementById('test-id');
console.log(test);
console.log('top:'+test.offsetTop);
Tested on Brave, Safari, ....
I try a jsfiddle now. Thanks
Level 2
@Sinnbeck I modified your Fiddle as close as I could and it works just fine. I'm getting crazy https://jsfiddle.net/710oc35h/2/
Level 2
I found my issue (!!!!!) by pure luck: I tried a HTML validator to check for potential unclosed tags. But showing the source allowed me to see a x-cloak attribute that I did add on the <body> tag.
Removing this attribute fixed everything.
I don't know why I added this attribute, must have been a reason at some point. And indeed: https://jsfiddle.net/710oc35h/3/ Thanks @sinnbeck
Please or to participate in this conversation.