testBtn.addEventListener is not a function

Question

S.O. Community, this is my first question on the website.

The error I keep getting is "testBtn.addEventListener is not a function." The code is as follows.

const testBtn = document.getElementsByClassName('test');

var brandOfCar= document.getElementsByClassName("custom-select");

testBtn.addEventListener("click",(console.log(brandOfCar.value)
 ));

    <div class="custom-select" style="width:200px;">
        <select>
          <option value="0">Select car:</option>
          <option value="1">Audi</option>
          <option value="2">BMW</option>
          <option value="3">Citroen</option>
          <option value="4">Ford</option>
          <option value="5">Honda</option>
          <option value="6">Jaguar</option>
          <option value="7">Land Rover</option>
          <option value="8">Mercedes</option>
          <option value="9">Mini</option>
          <option value="10">Nissan</option>
          <option value="11">Toyota</option>
          <option value="12">Volvo</option>
        </select>
       
 <button class="test">test</button>

In the end, I need to be able to store the selected value or text of each choice into a database, whenever the button is clicked. The car brands will be in the end switched to position on the webpage for the digital newspaper(newsite).

For added, Database is setup and works well at the moment.

Thank you for reading this, and I hope the stack overflow gods have mercy on this first post.

Please use `document.querySelector(".class")` instead of `document.getElementsByClassName("class")` — IT goldman, Aug 06 '22 at 17:16
["The getElementsByClassName method of Document interface returns an array-like object (a live HTMLCollection) of all child elements which have all of the given class name(s)"](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). You can't assign `addEventListener` to a live HTML collection. — Andy, Aug 06 '22 at 17:29

score 0 · Answer 1 · answered Aug 06 '22 at 17:29

The call document.getElementsByClassName('test') returns an array of elements that match that class name (even if there is just one match).

To get just the first match you would have to access it by index const testBtn = document.getElementsByClassName('test')[0];

A more powerful way is to use the document.querySelector(...) and document.querySelectorAll(...), where in addition to be able to use CSS selectors, you also have control whether you just want a single match to be returned or all matches.

Also in your second query you have to match the <select> element, not just its parent <div>.

I fixed it in the code below

// const testBtn = document.getElementsByClassName('test')[0];
const testBtn = document.querySelector('.test');

const brandOfCar = document.querySelector(".custom-select > select");

testBtn.addEventListener("click", (event) => {
    console.log(brandOfCar.value)
    // here you can also call some function that will store the value
});

    <div class="custom-select" style="width:200px;">
        <select>
          <option value="0">Select car:</option>
          <option value="1">Audi</option>
          <option value="2">BMW</option>
          <option value="3">Citroen</option>
          <option value="4">Ford</option>
          <option value="5">Honda</option>
          <option value="6">Jaguar</option>
          <option value="7">Land Rover</option>
          <option value="8">Mercedes</option>
          <option value="9">Mini</option>
          <option value="10">Nissan</option>
          <option value="11">Toyota</option>
          <option value="12">Volvo</option>
        </select>
       
 <button class="test">test</button>

score 0 · Answer 2 · answered Aug 06 '22 at 17:32

0

Because getElementByClassName gives you an array so just select the first element. if you do like testBtn[0] it will work

answered Aug 06 '22 at 17:32

ekshoonya

1
1

Asanka · Answer 3 · 2022-08-06T17:57:57.647

it's working with few changes

getElementsByClassName returns a array, use 1st element on it, instead use getElementById

const testBtn = document.getElementsByClassName('test')[0];

var brandOfCar= document.getElementsByClassName("custom-select")[0];

testBtn.addEventListener("click",() => console.log(brandOfCar.value));

move class custom-select to select tag, if you styles become mess with this change use id property in html and use getElementBy id in javascript

<div  style="width:200px;">
        <select class="custom-select">
          <option value="0">Select car:</option>
          <option value="1">Audi</option>
          <option value="2">BMW</option>
          <option value="3">Citroen</option>
          <option value="4">Ford</option>
          <option value="5">Honda</option>
          <option value="6">Jaguar</option>
          <option value="7">Land Rover</option>
          <option value="8">Mercedes</option>
          <option value="9">Mini</option>
          <option value="10">Nissan</option>
          <option value="11">Toyota</option>
          <option value="12">Volvo</option>
        </select>
      
 <button class="test">test</button>

using class names may conflict with styles while maintaining the code, I prefer using getElementById

have a look on simple example https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid1

testBtn.addEventListener is not a function

3 Answers3