Having Trouble With JavaScript Location Reload

Question

I'm creating my first JavaScript calculator, and I thought I could cheat on the clear button by reloading the page, but it doesn't seem to work. I have tried online editors, reopening chrome, moving files, and it still doesn't seem to work I don't know why, but help would be greatly appreciated. EDIT: Sorry for taking so long, as you can see I now have the HTML and CSS to go with the 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>

is your `clear` method being called ? showing you html code would be more useful — Muhammad Usman, Jan 03 '19 at 21:06
Check if your clear method is being called by adding a debug statement in it. Where is the code that is calling the clear function — varoons, Jan 03 '19 at 21:07
Use a service such as [Codepen](http://codepen.io), [JSFiddle](http://jsfiddle.net) or [REPL.it](http://repl.it) to post your full code so that we can see, and experience, the code. — Marcus Parsons, Jan 03 '19 at 21:17
if you are trying to clear answer, why not just do it the same way you set it? `document.getElementById("answer").innerHTML = 0` in the `clear()` function? This may not be possible based on the rest of your code or goals, but as others have stated, this question is unclear due to lack of code. — HolyMoly, Jan 03 '19 at 21:58

dev101 · Accepted Answer · 2019-01-05T02:44:58.873

It seems that clear() requires to bind an event listener in the DOM, for example:

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

Or, alternatively, use document.clear() (deprecated) or window.clear().

See related question:

Is "clear" a reserved word in Javascript?

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

To avoid that, simply rename clear() function to clearResult() and it will work.

See modified snippet below.

In addition, instead of location.reload(); you can simply clear content of the answer as a faster alternative:

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>

Having Trouble With JavaScript Location Reload

1 Answers1