Why does getElementsByClassName() not work?

Question

I'm taking a basics class on JavaScript and I have not been able to follow along since minute one. This language makes no sense to me. I get HTML and CSS, but JS is nonsense to me.

I'm trying to practice and learn by doing, but I can't even get past the first line of code. Here's what I have:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Buttons</title>
    <link rel="stylesheet" href="css/style.css">
    <script src = "js/jScript.js"></script>
    
</head>
    
<body>
  
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>

</body>
</html>

/* CSS SHEET */
@charset "UTF-8";
.btn{
    width: 10px;
    height: 40px;
    background: gray;
}

// JAVASCRIPT //

function btnStyle(){
    
    document.getElementsByClassName("btn").style.width="120px";
    
}

All I am trying to do is change all the buttons with class "btn" to have a width of 120px. By my limited understanding, this should work. I don't want an alternative way to accomplish this. I want an explanation of WHY this doesn't work.

The function returns a **list** of elements with the given class, even if there is only one. You cannot directly access the `.style` property from the list; you have to iterate over each element. — Pointy, Aug 30 '23 at 20:56
Well, the issue is that ```document.getElementByClassName("btn")``` returns an HTML collection, similar to an array, of all elements with class "btn". So when you're trying to apply the style directly to it it doesn't work because you're trying to apply the style to a collection of ellements and not to a single element. Does this make sense? — esQmo_, Aug 30 '23 at 20:57
Another problem is that OP never calls the function anywhere. — DallogFheir, Aug 30 '23 at 20:59
A bigger issue is that **you are taking a class and learning outdated code**. `.getElementsByClassName()` returns a "live" node list, which can hurt performance greatly. [It should not be used in almost all use cases](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) and instead `.querySelectorAll()` should be used. As an IT educator since HTML, CSS, and JavaScript were invented, I can tell you first-hand that there are a LOT of courses that teach outdated and non-standard code. — Scott Marcus, Aug 30 '23 at 21:03

score 2 · Answer 1 · answered Aug 30 '23 at 22:01

As has been noted, you can't access a specific instance of an element when working with a collection of elements unless you dig into the collection. It's like having a classic car collection and saying "change the color to blue" in reference to the collection when you really meant to change just one car's color.

Next, avoid .getElementsByClassName(). It's a 25+ year old way of scanning the DOM for a collection of matching elements, but it returns what's called a "live node list" and can hurt performance greatly. Frankly, any course you are taking to learn this should not be teaching this API and you should let your instructor know that they are teaching out of date stuff.

See the comments below:

// Gather all the elements with a class of "btn" into a collection
// and loop over that collection, one element at a time
document.querySelectorAll(".btn").forEach(function(button){
  button.classList.add("width120"); // Apply a pre-existing style
});

@charset "UTF-8";
.btn{
    width: 10px;
    height: 40px;
    background: gray;
}

.width120 { width:120px; }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Buttons</title>
    <link rel="stylesheet" href="css/style.css">
    <script src = "js/jScript.js"></script>  
</head>
<body> 
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>
</body>
</html>

Why does getElementsByClassName() not work?

1 Answers1