0

I have some code where I want to insert some HTML on the click of the button. But when I click that button, I get the following error:

TypeError: piecesLocation.insertAdjacentHTML is not a function

When inspecting the underlying code in the browser, I get this:

Browser code on inspect

The code that gets triggered when I click a button is this:

function showValues() {
const piecesLocation = document.getElementsByClassName('pieces');
piecesLocation.insertAdjacentHTML('afterend', '<g class="values"></g>');
}

What is wrong with my code that causes it to trigger this error?

Jon
  • 501
  • 3
  • 18
  • 1
    `getElementsByClassName` does not return one element. It returns an array like object. Either loop through the items, or specify an index `piecesLocation[0]` – evolutionxbox Jun 18 '21 at 16:32
  • That was the issue. I wasn't aware that it was an array that is returned. Thank you. – Jon Jun 18 '21 at 16:40
  • Be careful. It's not actually an array that's returned. So array methods like `map`, etc, are not defined on that object. – evolutionxbox Jun 18 '21 at 16:41

0 Answers0