时间戳

首页 > 解决方案 > 如何清除 h1 标签的 innerHTML

javascript - 如何清除 h1 标签的 innerHTML

问题描述

我只是想制作一个简单的基于手机的计算器。到目前为止，我已经设法显示按下的数字达到一定的字符限制。我正在尝试使它清除用作显示的 h1 标记中的数字。

我试过使用.innerHTML = ""，但这不起作用。我应该如何解决这个问题？

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

标签： javascript

解决方案

您不能使用clear()命名 javascript 函数，并且应该在文档准备好后设置queryLength的值，将您的代码替换为：

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

和清除按钮：

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

推荐阅读