如何将 integer 值分配给使用 querySelectorAll 选择器返回的数组中的每个 HTML 元素

Question

I want to create a calculator, The way I am thinking of it is getting the array of 'number' class with querySelectorAll. Then iterate through each element of the array returned and store all the numbers clicked in "firstOperand" but I don't know how to assign a value to each HTML element to be for example, the first HTML element = 1, second HTML element = 2. I am open to hear new solutions for this code, I know it is not exactly best formatted and perfect code but I am so new to this, thanks in advance.

HTML:

<div class="button number">1</div>
<div class="button number">2</div>

Javascript:

let numbers = document.querySelectorAll('.number')

let numberClicked;

numbers.forEach(number => {
    number.addEventListener('click', function() {
        let firstOperand = screen.innerText += numberClicked;
        console.log(firstOperand);
    })
});

Answer 1

Here you go, you were mostly doing it right but just were not looking for the value in the correct place, Added a bit of CSS to make a beautiful Calculator:

 let numbers = document.querySelectorAll('.number') let calculatorScreen = document.getElementById('calculatorScreen'); numbers.forEach(el => { el.addEventListener('click', function() { calculatorScreen.value = calculatorScreen.value + el.innerText; }); });

 html { font-size: 62.5%; box-sizing: border-box; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; }.calculator { border: 1px solid #ccc; border-radius: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; }.calculator-screen { width: 100%; height: 80px; border: none; background-color: #252525; color: #fff; text-align: right; padding-right: 20px; padding-left: 10px; font-size: 4rem; } button { height: 60px; font-size: 2rem;important. }:equal-sign { height; 98%: grid-area; 2 / 4 / 6 / 5. }:calculator-keys { display; grid: grid-template-columns, repeat(4; 1fr): grid-gap; 20px: padding; 20px; }

 <div class="calculator card"> <input type="text" id="calculatorScreen" class="calculator-screen z-depth-1" value="" disabled /> <div class="calculator-keys"> <button type="button" value="+">+</button> <button type="button" value="-">-</button> <button type="button" value="*">&times;</button> <button type="button" value="/">&divide;</button> <button type="button" value="7" class="number">7</button> <button type="button" value="8" class="number">8</button> <button type="button" value="9" class="number">9</button> <button type="button" value="4" class="number">4</button> <button type="button" value="5" class="number">5</button> <button type="button" value="6" class="number">6</button> <button type="button" value="1" class="number">1</button> <button type="button" value="2" class="number">2</button> <button type="button" value="3" class="number">3</button> <button type="button" value="0" class="number">0</button> <button type="button" value=".">.</button> <button type="button" value="all-clear">AC</button> <button type="button" class="equal-sign" value="=">=</button> </div> </div>

Answer 2

We can get the value by e.target.innerHTML

 const numbers = document.querySelectorAll('.number') const screen = document.getElementById('screen') numbers.forEach(number => { number.addEventListener('click', function(e) { screen.innerHTML += e.target.innerHTML }) });

 <div class="button number">1</div> <div class="button number">2</div> <div class="button number">3</div> <div class="button number">4</div> <div class="button number">5</div> <div class="button number">6</div> <div class="button number">7</div> <div class="button number">8</div> <div class="button number">9</div> <div class="button number">0</div> <div>==============screen========</div> <div id="screen"></div>

Answer 3

I am open to hear new solutions for this code

forEach provides the index as the second parameter, which we can handily use as the innerText of the element currently looping through.

 document.querySelectorAll('.number').forEach((e, i)=>{ e.innerText = i; })

 <div class="button number"></div> <div class="button number"></div> <div class="button number"></div> <div class="button number"></div> <div class="button number"></div> <div class="button number"></div> <div class="button number"></div> <div class="button number"></div> <div class="button number"></div> <div class="button number"></div>