在重新加载 JavaScript 位置时遇到问题

我正在创建我的第一个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>

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

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

或者，或者，使用 document.clear（）（已弃用）或 window.clear（）。

请参阅相关问题：

"clear"在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>

相关内容

最新更新

热门标签：