Document.getElementByClassName not working

Question

I'm trying to use Document.getElementByClassName, but it isn't working. I've included my code below. I'd appreciate any help.

HTML document:

<!doctype html>
<html>

<head>
  <meta charset=utf-8>
  <title>Day Practice</title>
  <style></style>
</head>

<body>
  <h1 class=myclass> Some text</h1>
</body>
</html>

JavaScript code:

var change = document.getElementByClassName("myclass");
change.innerHTML = "New text";

score 6 · Answer 1 · edited Nov 18 '15 at 16:47

It's getElementsByClassName Elements

Returns an array-like object of all child elements which have all of the given class names
- Mozilla Developer Network / Document.getElementsByClassName()

Loop through it or use change[0].innerHTML

1

   var change = document.getElementsByClassName("myclass");
   change[0].innerHTML = "New text";

 <h1 class="myclass"> Some text</h1>

2

   var change = document.getElementsByClassName("myclass");

   for (var i = 0; i < change.length; i++) {
     change[i].innerHTML = "New text";
   }

 <h1 class="myclass"> Some text</h1>

score 0 · Answer 2 · answered Dec 02 '16 at 18:27

Right before the closing body tag (), you want to add a script tag to attach your JavaScript file into the HTML file, so that they're both linked.

This is how it should look:

<head>
 <meta charset=utf-8>
 <title>Day Practice</title>
 <style></style>
</head>

<body>
  <h1 class=myclass> Some text</h1>
  <script src="javascriptfile.js"></script>
</body>

Also, it's "getElementsByClassName"; elements is plural

Document.getElementByClassName not working

2 Answers2

1

2

Linked