querySelectorAll worked fine, but it returns a list of elements rather than a single element. You can’t simply set onclick on the entire list at once; you’ll need to loop through it:
numberButtons.forEach((button) => {
button.onclick = function () {
// Handle button click
}
})
Your problem is not with querySelectorAll.
QuerySelectorAll returns an array of all found elements.
And you’re trying to put an onclick event on the array.
That won’t work.
To make onclick work, do this
numberButtons.forEach(btn => {
btn.onclick = function (evt) {
console.log(evt.target)
}
})
I’m not sure why I can’t query select my class by using document.querySelectorAll.
I thought at first that it was because they were within two other divs so I commented them out. And, still nothing. Targeting elementsById is no problem. I tested this with just one button and it console.log the button.value.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
<div class="heading">
<h1>Calculator!!!!</h1>
</div>
<div class="container">
<div id="calculator" class="calc">
<input type="text" id="userinput" placeholder="0">
<button class="numbers" id= "seven" >7</button>
<button class="numbers" id= "eight">8</button>
<button class="numbers"id= "nine">9</button>
<button class="operator"id= "multiply">*</button>
<button class="numbers" id= "four">4</button>
<button class="numbers" id= "five">5</button>
<button class="numbers" id= "six">6</button>
<button class="operator" id= "subtract">-</button>
<button class="numbers" id= "one">1</button>
<button class="numbers" id= "two">2</button>
<button class="numbers" id= "three">3</button>
<button class ="operator" id= "add">+</button>
<button class ="operator" id= "divide">/</button>
<button id= "clr ()">C</button>
<button id ="del ()">DEL</button>
<button class = "equals" id= "equals">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
js
let currentOperator = null;
let firstOperand = null;
let secondOperand = null;
let toBeCleaned = false;
let result = null;
let display = document.getElementById("userinput");
const numberButtons = document.querySelectorAll(".numbers");
const calc = document.querySelector(".calc")
const operators = document.querySelectorAll(".operator");
const equalSign = document.getElementById("equal");
const clearButton = document.getElementById("clear");
numberButtons.onclick = function () {
if (numberButtons.className == "numbers") {
console.log(numberButtons);
}
}
querySelectorAll works fine. it returns a
You can simply check if the
thank you for this, but now im presented with a new problem. numberButtons.forEach(btn => { btn.onclick = function (btn) { display.placeholder = btn.target.value; } }) would a for loop let me display multiple numbers. Im summing the forEach is preventing multiple numbers from being displayed