How do I clear the innerHTML of a h1 tag

Question

I'm just trying to make a simple mobile-based calculator. So far I've managed to display the digits pressed up to a certain character limit. I'm trying to make it so it clears the digits within the h1 tag that serves as the display.

I've tried using .innerHTML = "", but that isn't working. How should I fix this?

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;
}

score 1 · Accepted Answer · answered Sep 15 '18 at 23:17

You can't name a javascript function with clear(), and the value of queryLength should set after the document ready replace your code by:

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;
}

and the clear button with:

<button onclick="clearValue()" onkeypress="clearValue()">AC</button>

score 0 · Answer 2 · edited Sep 15 '18 at 23:50

0

You can try using .innerText = "".

edited Sep 15 '18 at 23:50

Nisse Engström

4,738
23
27
42

answered Sep 15 '18 at 23:13

Iorsase David

23
3

score 0 · Answer 3 · answered Sep 15 '18 at 23:16

The problem is that the name of your function clear is already used by this native function document.clear(). Here is a deeper look on why this native function is called and not your function: Is “clear” a reserved word in Javascript?.

The solution is to simply rename your clear() function to something else e.g. allcancel()

How do I clear the innerHTML of a h1 tag

3 Answers3