Javascript offsetWidth returning undefined

javascript offsetwidth
chazbot7 picture chazbot7 · Aug 19, 2013 · Viewed 9.4k times · Source

I have a JS function that gets the width of a div on my page:

function getWidth() { 
   var container = document.getElementsByClassName('tag');
   var message = "The width of the contents width padding: " + container.width + "px.\n";
   alert(message);
}

The function doesn't run until page is loaded:

<body onload="getWidth()">

And the div is defined in CSS as a percentage, with a max-width of 900px, which is what the output should be. But instead, I'm getting this alert:

The width of the contents width padding: undefinedpx.

I've looked around for an answer, but it looks like this should be work. Any reason why it's not working?

Answer

epascarello picture epascarello · Aug 19, 2013

getElementsByClassName returns a collection of nodes.

You are acting like it is one.

You would need to select the index.

var container = document.getElementsByClassName('tag')[0];

Related questions

offsetHeight and offsetWidth calculating incorrectly on first onclick event, not second

I have written the following script to display a hidden element, then fix it's position to the center of the page. function popUp(id,type) { var popUpBox = document.getElementById(id); popUpBox.style.position = "fixed"; popUpBox.style.display = "block"; popUpBox.style.…

Read More
offsetWidth is returning incorrect value

Okay so I'm attempting to make a horizontal site but when I try getting the offsetWidth of the navigation, it returns a value far higher than the true width. The design in question can be found here. The CSS for …

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More