Solo estoy tratando de hacer una calculadora simple basada en dispositivos móviles. Hasta ahora he logrado mostrar los dígitos presionados hasta cierto límite de caracteres. Estoy tratando de hacerlo para que borre los dígitos dentro de la etiqueta h1 que sirve como pantalla.

Intenté usar .innerHTML = "", pero eso no funciona. ¿Cómo debo arreglar esto?

HTML

    <body>
        <h1 id="display">Calculator</h1>
        <div class="buttons container" id="arithmetic">
            <button onclick="clear()" onkeypress="clear()">AC</button>
            <button><sup>+</sup>&frasl;<sub>&minus;</sub></button>
            <button>%</button>
            <button>&divide;</button>
            <button onclick="number(7)" onkeypress="number(7)">7</button>
            <button onclick="number(8)" onkeypress="number(8)">8</button>
            <button onclick="number(9)" onkeypress="number(9)">9</button>
            <button>&times;</button>

            <button onclick="number(4)" onkeypress="number(4)">4</button>
            <button onclick="number(5)" onkeypress="number(5)">5</button>
            <button onclick="number(6)" onkeypress="number(6)">6</button>
            <button>&minus;</button>

            <button onclick="number(1)" onkeypress="number(1)">1</button>
            <button onclick="number(2)" onkeypress="number(2)">2</button>
            <button onclick="number(3)" onkeypress="number(3)">3</button>
            <button>+</button>

            <button>.</button>
            <button id="doubleSpace" onclick="number(0)" onkeypress="number(0)">0</button>
            <button>=</button>
        </div>     
        <div class="calcOptions container">         
            <button>Arithmetic</button>
            <button>Algebra</button>
            <button>Calculus</button>
            <button>Statistics</button>         
        </div>     
    </body>

JavaScript

var currentQuery;
var pastQuery;
var queryLength = document.getElementById("display").innerHTML.length;

function number(n) {
    if (document.getElementById("display").innerHTML == "Calculator") {
        document.getElementById("display").innerHTML = "";
    }

    if (queryLength >= 15) {

    } else {
        currentQuery = document.getElementById("display").innerHTML;
        currentQuery += n;
        document.getElementById("display").innerHTML = currentQuery;
    }
}

function clear() {
    currentQuery = "";
    document.getElementById("display").innerHTML = currentQuery;
}
-2
AhumanPeople 16 sep. 2018 a las 01:58

3 respuestas

La mejor respuesta

No puede nombrar una función de JavaScript con clear () , y el valor de queryLength debe establecerse después de que el documento esté listo para reemplazar su código por:

var currentQuery;
var pastQuery;
var queryLength;
document.addEventListener("DOMContentLoaded", function(event) {

    var queryLength = document.getElementById("display").innerHTML.length;
})
function number(n) {
    if (document.getElementById("display").innerHTML == "Calculator") {
        document.getElementById("display").innerHTML = "";
    }

    if (queryLength >= 15) {

    } else {
        currentQuery = document.getElementById("display").innerHTML;
        currentQuery += n;
        document.getElementById("display").innerHTML = currentQuery;
    }
}

function clearValue() {
    currentQuery = "";
    document.getElementById("display").innerHTML = currentQuery;
}

Y el botón de borrar con:

<button onclick="clearValue()" onkeypress="clearValue()">AC</button>
1
ali taha 15 sep. 2018 a las 23:17

El problema es que el nombre de su función clear ya lo utiliza esta función nativa document.clear (). Aquí hay una mirada más profunda sobre por qué se llama a esta función nativa y no a su función: Is "borrar" una palabra reservada en Javascript?.

La solución es simplemente cambiar el nombre de su función clear() a otra cosa, p. allcancel()

0
Venify 15 sep. 2018 a las 23:16

Puedes intentar usar .innerText = "".

0
Nisse Engström 15 sep. 2018 a las 23:50