Uncaught TypeError: buttons.addEventListener is not a function

JavaScript
#1

HI!
I tried to code on calculator project and I had this message: Uncaught TypeError: buttons.addEventListener is not a function. And I don’t know why.

var clear = document.getElementById('clear');
var result = document.getElementById('results');
indow.onload = function() {
var button = document.getElementById('buttons');
	buttons.addEventListener('click', function(event){
	    if(event.target.nodeName === 'BUTTON') {
		    var value = event.target.innerHTML;
		    answer.innerHTML += value;
		}
		
	
    });

};

Thank you to spend a few minutes to help me. I appreciate you.

#2

You have a variable named button (singular), but you’re adding event listener to buttons (plural).

#3

Yes, but I tried with my variable button(singular). It still doesn’t work. :pensive:

#4

Then it’s probably button's id in HTML.

#5

I show you my HTML code:

<body>
    
    <div class="container">
      <div class="row">
            <div class="col-lg-12">
                <div class="calculator-title">
                <h1>Calculator</h1>
                <p style="font-family:Noteworthy">Designed and Coded by Rbertille</p>
                </div>
                <form class="calculator">
                    <div class="result">
                      <div id="results" class="display-zero">
                      </div>
                    </div>
                    <div class="button-calculator">
                      <button  type="button" class="ac" id='clear'>ac</button>
                      <button type="button" class="soustrandplus" id="buttons">+/-</button>
                      <button type="button" class="pourcentage" id="buttons">%</button>
                      <button  type="button" class="division" id="buttons" style="background-color:#FF8C00">/</button>
                    </div>
                    <div class="calculator-button">
                        <div class="number-calculator">
                            <button type="button" class="seven" id="buttons">7</button>
                            <button type="button" class="eight" id="buttons">8</button>
                            <button type="button" class="nine"  id="buttons">9</button>
                            <button type="button" class="multiplication" id="buttons" style="background-color:#FF8C00">X</button>
                        </div>
                        <div class="num-calculator"> 
                            <button  type="button" class="four" id="buttons">4</button> 
                            <button  type="button" class="five" id="buttons">5</button>
                            <button  type="button" class="six"  id="buttons">6</button>
                            <button  type="button" class="soustraction" id="buttons" style="background-color:#FF8C00">-</button>
                        </div>
                        <div class="num-calculator">
                            <button  type="button" class="one" id="buttons">1</button>
                            <button  type="button" class="two" id="buttons">2</button>
                            <button  type="button" class="three" id="buttons">3</button>
                            <button  type="button" class="plus" id="buttons" style="background-color:#FF8C00">+</button>
                        </div>
                        <div class="num-calculator">
                            <button  type="button" class="zero"  id="buttons">0</button>
                            <button  type="button" class="decimal" id="decimal">.</button>
                            <button  type="button" class="equal" id="buttons" style="background-color:#FF8C00">=</button>
                        </div>
                      </div>
                </form>
            </div>
        </div>
    </div>
#6

id's must be unique, but event as it is right now there shouldn’t be an error, it’s just event listener will work only on +/- button.

https://codepen.io/jenovs/pen/qGNMEa?editors=1010

#7

So what can I do to fix this?

#8

You are missing the ‘w’ from window.onload

2 Likes
#9