Question

我正在创建我的第一个JavaScript计算器，我以为我可以通过重新加载页面来欺骗清除按钮，但这似乎不起作用。我已经尝试过在线编辑器，重新打开chrome，移动文件，但它似乎仍然无法正常工作，我不知道为什么，但是我们将不胜感激。编辑：很抱歉花了这么长时间，您可以看到我现在有了HTML和CSS以及JavaScript

var firstNumber = [];
var secondNumber = [];
let current = 'firstNumber';
var operation;

function clear(){
    location.reload();
}

function set(number){
    if (current == 'firstNumber'){
        firstNumber.push(number);
    }
    else{
        secondNumber.push(number);
    }
    document.getElementById('answer').innerHTML = number;
}

function change(operator){
    current = 'secondNumber';
    operation = operator;
    if (operation == 'addition'){
        return document.getElementById('answer').innerHTML = '+';
    }
    else if (operation == 'subtraction'){
        return document.getElementById('answer').innerHTML = "-";
    }
    else if (operator == 'multiplication'){
        return document.getElementById('answer').innerHTML = 'x';
    }
    else if (operator == 'multiplication'){
    }
    return document.getElementById("answer").innerHTML = '÷';
}

function solve(){
    firstNumber = firstNumber.join('');
    secondNumber = secondNumber.join('');
    firstNumber = parseInt(firstNumber);
    secondNumber = parseInt(secondNumber);
    if (operation == 'addition'){
        return document.getElementById("answer").innerHTML = firstNumber + secondNumber;
    }
    else if (operation == 'subtraction'){
        return document.getElementById('answer').innerHTML = firstNumber - secondNumber;
    }
    else if (operation == 'multiplication'){
        return document.getElementById("answer").innerHTML = firstNumber * secondNumber;
    }
    else if (operation == 'division'){
        return document.getElementById('answer').innerHTML = firstNumber / secondNumber;
    }
}

<!-- begin snippet: js hide: false console: true babel: false -->

h1{
    text-align: center;
    font-family: monospace;
    font-weight: bold;
    font-size: 75px;
    text-shadow: 3px 3px 15px red;
}

#container{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 500px;
    margin-left: 25%;
}

.row{
    display: flex;
    flex-direction: row;
    height: 15%;
    margin-top: 1%;
    width: 100%;
}

button{
    width: 30%;
    text-align: center;
    margin: 5px;
    font-size: 35px;
    background-color: rgb(255, 0, 0);
    border-color: purple;
}

#answer{
    border-style: solid;
    border-color: red;
    border-width: 3px;
    border-radius: 5px;
    width: 95%;
    height: 35px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}

#wide{
    width: 95%;
    height: 35px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}

body{
    background-image: linear-gradient(to bottom right, rgb(0, 0, 255), rgb(100, 0, 255));
}

<!doctype html>
<html>
    <head>
        <title>Calculator</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/static/calculator.css">
        <script src="/static/calculator.js"></script>
    </head>
    <body>
        <h1>Calculator</h1>
        <br />
        <div id="container">
            <p id="answer"></p>
            <button onclick="solve()" id="wide">=</button>
            <div class="row">
                <button onclick="set(1)">1</button>
                <button onclick="set(2)">2</button>
                <button onclick="set(3)">3</button>
            </div>
            <div class="row">
                <button onclick="set(4)">4</button>
                <button onclick="set(5)">5</button>
                <button onclick="set(6)">6</button>
            </div>
            <div class="row">
                <button onclick="set(7)">7</button>
                <button onclick="set(8)">8</button>
                <button onclick="set(9)">9</button>
            </div>
            <div class="row">
                <button onclick="set(0)">0</button>
                <button onclick="change('addition')">+</button>
                <button onclick="change('subtraction')">-</button>
            </div>
            <div class="row">
                <button onclick="change('multiplication')">x</button>
                <button onclick="change('division')">/</button>
                <button onclick="clear()">c</button>
            </div>
        </div>
    </body>
</html>

Answer 1

似乎clear（）需要在DOM中绑定事件侦听器，例如：

<button id="clear">c</button>
<script>document.getElementById("clear").addEventListener("click", clear);</script>

或者，也可以使用 document.clear（）（不建议使用）或 window.clear（）。

查看相关问题：

Is "clear" a reserved word in Javascript?

https://developer.mozilla.org/en-US/docs/Web/API/Document/clear

为避免这种情况，只需将clear（）函数重命名为clearResult（）即可。

请参见下面的修改后的代码段。

此外，除了 location.reload（）; 外，您还可以简单地清除答案内容，以作为一种更快的选择：

document.getElementById('answer').innerHTML = '';

var firstNumber = [];
var secondNumber = [];
let current = 'firstNumber';
var operation;

function clearResult(){
    location.reload();
}

function set(number){
    if (current == 'firstNumber'){
        firstNumber.push(number);
    }
    else{
        secondNumber.push(number);
    }
    document.getElementById('answer').innerHTML = number;
}

function change(operator){
    current = 'secondNumber';
    operation = operator;
    if (operation == 'addition'){
        return document.getElementById('answer').innerHTML = '+';
    }
    else if (operation == 'subtraction'){
        return document.getElementById('answer').innerHTML = "-";
    }
    else if (operator == 'multiplication'){
        return document.getElementById('answer').innerHTML = 'x';
    }
    else if (operator == 'multiplication'){
    }
    return document.getElementById("answer").innerHTML = '÷';
}

function solve(){
    firstNumber = firstNumber.join('');
    secondNumber = secondNumber.join('');
    firstNumber = parseInt(firstNumber);
    secondNumber = parseInt(secondNumber);
    if (operation == 'addition'){
        return document.getElementById("answer").innerHTML = firstNumber + secondNumber;
    }
    else if (operation == 'subtraction'){
        return document.getElementById('answer').innerHTML = firstNumber - secondNumber;
    }
    else if (operation == 'multiplication'){
        return document.getElementById("answer").innerHTML = firstNumber * secondNumber;
    }
    else if (operation == 'division'){
        return document.getElementById('answer').innerHTML = firstNumber / secondNumber;
    }
}

<!-- begin snippet: js hide: false console: true babel: false -->

h1{
    text-align: center;
    font-family: monospace;
    font-weight: bold;
    font-size: 75px;
    text-shadow: 3px 3px 15px red;
}

#container{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 500px;
    margin-left: 25%;
}

.row{
    display: flex;
    flex-direction: row;
    height: 15%;
    margin-top: 1%;
    width: 100%;
}

button{
    width: 30%;
    text-align: center;
    margin: 5px;
    font-size: 35px;
    background-color: rgb(255, 0, 0);
    border-color: purple;
}

#answer{
    border-style: solid;
    border-color: red;
    border-width: 3px;
    border-radius: 5px;
    width: 95%;
    height: 35px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}

#wide{
    width: 95%;
    height: 35px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}

body{
    background-image: linear-gradient(to bottom right, rgb(0, 0, 255), rgb(100, 0, 255));
}

<!doctype html>
<html>
    <head>
        <title>Calculator</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/static/calculator.css">
        <script src="/static/calculator.js"></script>
    </head>
    <body>
        <h1>Calculator</h1>
        <br />
        <div id="container">
            <p id="answer"></p>
            <button onclick="solve()" id="wide">=</button>
            <div class="row">
                <button onclick="set(1)">1</button>
                <button onclick="set(2)">2</button>
                <button onclick="set(3)">3</button>
            </div>
            <div class="row">
                <button onclick="set(4)">4</button>
                <button onclick="set(5)">5</button>
                <button onclick="set(6)">6</button>
            </div>
            <div class="row">
                <button onclick="set(7)">7</button>
                <button onclick="set(8)">8</button>
                <button onclick="set(9)">9</button>
            </div>
            <div class="row">
                <button onclick="set(0)">0</button>
                <button onclick="change('addition')">+</button>
                <button onclick="change('subtraction')">-</button>
            </div>
            <div class="row">
                <button onclick="change('multiplication')">x</button>
                <button onclick="change('division')">/</button>
                <button onclick="clearResult()">c</button>
            </div>
        </div>
    </body>
</html>

JavaScript位置重新加载遇到问题

1 个答案: