Acabo de empezar a aprender a codificar y actualmente estoy construyendo mi primera calculadora usando javascript. Funciona hasta que la entrada se proyecta en la pantalla al hacer clic en el botón y el botón de borrado 'C' borra la pantalla de entrada, sin embargo, sigo recibiendo un error de sintaxis cuando uso el botón '=" cuando intento evaluar y necesito ayuda, lo he intentado de varias maneras, pero tengo problemas al intentar usar screen.value.
// Selecting elements const buttons = document.querySelectorAll(".btn"); let screen = document.getElementById("input"); //function to add input onto screen const addTo = function(e) { screen.value += e; }; for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function() { // log click to a variable const input = buttons[i].value; // add clicked input to screen addTo(input); // make screeninput evaluate sum if (input === "=") { let equals = eval(screen.value); equals = screen.value; } else if (input === "C") { screen.value = " "; } }); } <h1>MY CALCULATOR</h1> <div id=c alc class="calc-container"> <div id=s creen class="input-container"> <input type=text name=d isplay id=i nput class="user-input" value="" /> </div> <div id="wrapper" class="button-container"> <input value="9" type=b utton class="btn" /> <input value="8" type=b utton class="btn" /> <input value="7" type=b utton class="btn" /> <input value="6" type=b utton class="btn" /> <input value="5" type=b utton class="btn" /> <input value="4" type=b utton class="btn" /> <input value="3" type=b utton class="btn" /> <input value="2" type=b utton class="btn" /> <input value="1" type=b utton class="btn" /> <input value="*" type=b utton class="btn" /> <input value="0" type=b utton class="btn" /> <input value="+" type=b utton class="btn" /> <input value="/" type=b utton class="btn" /> <input value="-" type=b utton class="btn" /> <input value="=" type=b utton class="btn equals"> <input value="." type=b utton class="btn" /> <input value="C" type=b utton class="btn" /> </div> </div>En el caso de = , está tratando de evaluar una expresión con = , por ejemplo, 10+2= . Que es una expresión inválida. Debe evitar that = from the eval declaración y ejecutar solo 10+2 .
Llame addTo solo si la entrada no es = y C para arreglar esto.
// Selecting elements const buttons = document.querySelectorAll(".btn"); let screen = document.getElementById("input"); //function to add input onto screen const addTo = function (e) { screen.value += e; }; for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function () { // log click to a variable const input = buttons[i].value; // make screeninput evaluate sum if (input === "=") { let equals = eval(screen.value); screen.value = equals; } else if (input === "C") { screen.value = " "; } else { // add clicked input to screen addTo(input); } }); } <h1>MY CALCULATOR</h1> <div id=calc class="calc-container"> <div id=screen class="input-container"> <input type=text name=display id=input class="user-input" value=""> </input> </div> <div id="wrapper" class="button-container"> <input value="9" type=button class="btn"></input> <input value="8" type=button class="btn"></input> <input value="7" type=button class="btn"></input> <input value="6" type=button class="btn"></input> <input value="5" type=button class="btn"></input> <input value="4" type=button class="btn"></input> <input value="3" type=button class="btn"></input> <input value="2" type=button class="btn"></input> <input value="1" type=button class="btn"></input> <input value="*" type=button class="btn"></input> <input value="0" type=button class="btn"></input> <input value="+" type=button class="btn"></input> <input value="/" type=button class="btn"></input> <input value="-" type=button class="btn"></input> <input value="=" type=button class="btn equals"></input> <input value="." type=button class="btn"></input> <input value="C" type=button class="btn"></input> </div> </div>Debido a que haces eval(screen.value) .
Cuando llama a la función eval , su screen.value es 'xxxx=' .
Esto no está en la sintaxis de eval .