Cuando presiono cualquier botón numérico, quiero que el número se escriba en el "área numérica" y luego quiero tomar este texto y convertirlo en una matriz. pero el contenido de texto del elemento "pre" cuando lo convierto en una matriz, su valor siempre es nulo ("longitud: 0") aunque haya ingresado los números.
const typedNum = document.querySelector("#num-area"); const result = document.querySelector("#result"); const one = document.querySelector("#one"); const two = document.querySelector("#two"); const plus = document.querySelector("#plus"); const equal = document.querySelector("#equal"); const arr_equation = typedNum.textContent.split(""); one.addEventListener("click", function () { typedNum.textContent += "1"; }) two.addEventListener("click", function () { typedNum.textContent += "2"; }) plus.addEventListener("click", function () { typedNum.textContent += " + "; }) equal.addEventListener("click", function () { result.textContent = arr_equation; }) #num-area { width: 440px; height: 100px; position: absolute; top: 0; font-family: Arial; font-size: 35px; background-color: #ddd; color: #000; padding:20px; } #result { width: 440px; height: 50px; position: absolute; top: 150px; font-family: Arial; font-size: 20px; background-color: #fdd; color: #000; } span { bottom: 0; position: absolute; width: 90px; height: 55px; background-color: blue; border-radius: 15px; color: #fff; font-size: 20px; font-family: Arial; display: flex; justify-content: center; align-items: center; cursor: pointer; } #one { margin-left: 100px; } #plus { margin-left: 200px; } #equal { margin-left: 300px; } <pre id="num-area"></pre> <pre id="result"></pre> <span id="one">1</span> <span id="two">2</span> <span id="plus">+</span> <span id="equal">=</span>')
Esta línea se ejecuta una vez, y luego, si usa la variable arr_equation más tarde, siempre devolverá el mismo valor, no se actualizará automáticamente, cuando se cambie typedNum :
const arr_equation = typedNum.textContent.split(""); Lo que debe hacer es calcular arr_equation cada vez que haga clic en el botón equal .
Por ejemplo:
equal.addEventListener("click", function () { const arr_equation = typedNum.textContent.split("").filter(item => item !== " "); result.textContent = arr_equation; })Parece que estás haciendo una calculadora básica, si es así, ¿necesitas una matriz? podrías hacer algo como esto:
const typedNum = document.querySelector("#num-area"); const result = document.querySelector("#result"); const one = document.querySelector("#one"); const two = document.querySelector("#two"); const plus = document.querySelector("#plus"); const equal = document.querySelector("#equal"); let add = false; let equationPartA = "0" let equationPartB = "0" one.addEventListener("click", function() { typedNum.textContent += "1"; if (!add) { equationPartA += "1"; } else { equationPartB += "1"; } }) two.addEventListener("click", function() { typedNum.textContent += "2"; if (!add) { equationPartA += "2"; } else { equationPartB += "2"; } }) plus.addEventListener("click", function() { add = true typedNum.textContent += " + "; }) equal.addEventListener("click", function() { result.textContent = parseInt(equationPartA, 10) + parseInt(equationPartB, 10) add = false, typedNum.textContent = '' equationPartA = '0' equationPartB = '0' }) #num-area { font-family: Arial; font-size: 35px; background-color: #ddd; color: #000; width: 300px; float: left; height: 50px; margin: 10px; box-sizing: border-box; padding: 10px; } #result { font-family: Arial; font-size: 20px; background-color: #fdd; color: #000; width: 100px; float: left; height: 50px; margin: 10px; box-sizing: border-box; padding: 10px; } span { bottom: 0; position: absolute; width: 90px; height: 55px; background-color: blue; border-radius: 15px; color: #fff; font-size: 20px; font-family: Arial; display: flex; justify-content: center; align-items: center; cursor: pointer; } #one { margin-left: 100px; } #plus { margin-left: 200px; } #equal { margin-left: 300px; } <pre id="num-area"></pre> <pre id="result"></pre> <span id="one">1</span> <span id="two">2</span> <span id="plus">+</span> <span id="equal">=</span>espero que esto ayude