TypeError: document.getElementByClassName is not a function

Question

I'm trying to change the value of <p class="dice1"><p> in html via javascript, but nothing changes when I run the code.

<div class="container">
  <h1>Refresh Me</h1>

  <div class="dice">
    <p>Player 1</p>
    <img class="img1" src="">
    <p class="dice1"></p>
  </div>
</div>
<script src="dice.js" charset="utf-8"></script>

www App Brewery com

document.getElementByClassName("dice1").innerHTML = "your dice number is 6"

I tried document.getElementsByClassName("dice1").innerHTML = "your dice number is 6" too, it still not working — Đức Seven, Oct 28 '21 at 06:52
Try `document.getElementsByClassName('dice1')[0].innerHTML = 'your dice number is 6'` — aerial, Oct 28 '21 at 06:56
@aerial301 it is working!! Why do I have to add [0] while I only have 1 "dice1'' in my codes? — Đức Seven, Oct 28 '21 at 06:59
@ĐứcSeven because document.getElementsByClassName() returns a list. With `[0]` you retrieve the first item from that list. Indexes start at 0 — milt_on, Oct 28 '21 at 07:01

score 1 · Accepted Answer · answered Oct 28 '21 at 07:05

1

This method doesn't return specified element, but list of elements. Try to filter list which it return to get element which u'd like to edit.

answered Oct 28 '21 at 07:05

kacper destruktor

26
2

TypeError: document.getElementByClassName is not a function

1 Answers1