Hice una calculadora usando JS, los elementos del teclado numérico con los valores del 1 al 9 se activan usando un detector de eventos.
const items = document.querySelectorAll('.item-number');Estos se muestran en mi elemento de pantalla
let display = document.getElementById('show');Todo esto funciona bien, mi problema es con el botón del punto decimal, en el que originalmente traté de asignar un detector de eventos. Esto funcionó bien si presiono el botón decimal y luego presiono un botón numérico
p.ej; 0.2 pero cuando presiono primero el número y luego el decimal obtengo lo mismo que arriba.
Soy bastante nuevo en JS y he probado muchas formas diferentes de intentar resolver esto, como usar concat, etc.
const itemDecimal = document.querySelector('.item-operator__decimal');const itemNumbers = document.querySelectorAll('.item-number'); const itemDecimal = document.querySelector('.item-operator__decimal'); const itemClear = document.querySelector('.item-clear__recent'); const itemClearAll = document.querySelector('.item-clear__all'); let display = document.getElementById('show'); let outPutTextElements; itemNumbers.forEach(item => { let itemTxtNumbers = [item.innerHTML]; // get string numbers 1-9 values item.addEventListener('click',function(){ outPutTextElements= document.getElementById('show').innerHTML += itemTxtNumbers; // display incremented element let number = parseFloat(outPutTextElements); // prevent zero from appending to front number % 1 == 0 ? number.toFixed(0): number.toFixed(1); document.getElementById('show').innerHTML = number; }); }); itemDecimal.addEventListener('click',function(decimal){ let decimalPoint = decimal.target.innerText; display.innerText = decimalPoint; })A continuación se muestra el html
<div class="screen" id="show"> <button class="item item-number">7</button> <button class="item item-number">8</button> <button class="item item-number">9</button> <button class="item item-clear__recent">CE</button> <div class="item item-clear__all">C</div> <button class="item item-number">4</button> <button class="item item-number">5</button> <button class="item item-number">6</button> <button class="item item-operator">/</button> <button class="item item-operator">*</button> <button class="item item-number">1</button> <button class="item item-number">2</button> <button class="item item-number">3</button> <button class="item item-operator">-</button> <button class="item item-operator">+</button> <button class="item item-number item-number__zero">0</button> <button class="item item-operator__decimal">.</button> <button class="item item-operator__equals">=</button> </div>