Having Trouble With JavaScript Location Reload





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















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>








javascript







share|improve this question




















  • 1





    is your clear method being called ? showing you html code would be more useful

    – George Bailey
    Jan 3 at 21:06








  • 1





    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 3 at 21:07






  • 1





    Use a service such as Codepen, JSFiddle or REPL.it to post your full code so that we can see, and experience, the code.

    – Marcus Parsons
    Jan 3 at 21:17













  • showing your form would help.

    – epascarello
    Jan 3 at 21:24











  • 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 3 at 21:58


















1















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>








javascript







share|improve this question




















  • 1





    is your clear method being called ? showing you html code would be more useful

    – George Bailey
    Jan 3 at 21:06








  • 1





    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 3 at 21:07






  • 1





    Use a service such as Codepen, JSFiddle or REPL.it to post your full code so that we can see, and experience, the code.

    – Marcus Parsons
    Jan 3 at 21:17













  • showing your form would help.

    – epascarello
    Jan 3 at 21:24











  • 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 3 at 21:58














1












1








1


0






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>








javascript







share|improve this 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>








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>





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>





javascript




javascript






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 5 at 1:47







Elijah Bentley

















asked Jan 3 at 21:02









Elijah BentleyElijah Bentley

63




63








  • 1





    is your clear method being called ? showing you html code would be more useful

    – George Bailey
    Jan 3 at 21:06








  • 1





    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 3 at 21:07






  • 1





    Use a service such as Codepen, JSFiddle or REPL.it to post your full code so that we can see, and experience, the code.

    – Marcus Parsons
    Jan 3 at 21:17













  • showing your form would help.

    – epascarello
    Jan 3 at 21:24











  • 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 3 at 21:58














  • 1





    is your clear method being called ? showing you html code would be more useful

    – George Bailey
    Jan 3 at 21:06








  • 1





    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 3 at 21:07






  • 1





    Use a service such as Codepen, JSFiddle or REPL.it to post your full code so that we can see, and experience, the code.

    – Marcus Parsons
    Jan 3 at 21:17













  • showing your form would help.

    – epascarello
    Jan 3 at 21:24











  • 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 3 at 21:58








1




1





is your clear method being called ? showing you html code would be more useful

– George Bailey
Jan 3 at 21:06







is your clear method being called ? showing you html code would be more useful

– George Bailey
Jan 3 at 21:06






1




1





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 3 at 21:07





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 3 at 21:07




1




1





Use a service such as Codepen, JSFiddle or REPL.it to post your full code so that we can see, and experience, the code.

– Marcus Parsons
Jan 3 at 21:17







Use a service such as Codepen, JSFiddle or REPL.it to post your full code so that we can see, and experience, the code.

– Marcus Parsons
Jan 3 at 21:17















showing your form would help.

– epascarello
Jan 3 at 21:24





showing your form would help.

– epascarello
Jan 3 at 21:24













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 3 at 21:58





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 3 at 21:58












1 Answer
1






active

oldest

votes


















0














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>








share|improve this answer


























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54029762%2fhaving-trouble-with-javascript-location-reload%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    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>








    share|improve this answer






























      0














      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>








      share|improve this answer




























        0












        0








        0







        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>








        share|improve this answer















        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>








        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>





        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>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Jan 5 at 2:44

























        answered Jan 5 at 2:19









        dev101dev101

        78611324




        78611324
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54029762%2fhaving-trouble-with-javascript-location-reload%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            Mossoró

            Image
              Nota: Para outros significados, veja Mossoró (desambiguação). Município de Mossoró "Capital do Oeste Potiguar" [ 1 ] "Capital nacional do Semiárido" [ 2 ] [ 3 ] "Capital Cultural do Rio Grande do Norte" [ 1 ] "Terra de Santa Luzia" [ 4 ] "Terra do Sol, do Sal e do Petróleo" [ 5 ] "Terra da Liberdade [ 6 ] " Centro de Mossoró, com a Praça Vigário Antônio Joaquim e, ao fundo, a câmara municipal de vereadores (esquerda) e Catedral de Santa Luzia (direita) Bandeira Brasão Hino Fundação 15 de março de 1852 (166 anos) Gentílico mossoroense Padroeiro(a) Santa Luzia Prefeito(a) Rosalba Ciarlini Rosado (PP) (2017 – 2020 ) Localização Localização de Mossoró no Rio Grande do Norte Mossoró Localização de Mossoró no Brasil 05° 11' 16" S 37° 20' 38" O 05° 11' 16" S 37° 20' 38" O Unidade federativa Rio Grande do No...
            Read more

            Error while reading .h5 file using the rhdf5 package in R

            Image
            0 I'm importing a .h5 file into R by using the rhdf5 package. But a warning message showed and I found the DATE_TIME column of my data is NA when I view the imported file. Warning message: In H5Dread(h5dataset = h5dataset, h5spaceFile = h5spaceFile, h5spaceMem = h5spaceMem, : h5read for type 'TIME' not yet implemented. Values replaced by NA's. It's all normal when I use Vitables (Python) to open the .h5 file. But the DATE_TIME column is NA with HDFViewer open it. My code is: library(rhdf5) test <- h5read("mytestdata.h5", "/results") View(mydatatest) I want to use R to open .h5 file. Please give me some help! Thanks in advance! r hdf5 rhdf5 ...
            Read more

            Pushsharp Apns notification error: 'InvalidToken'

            Image
            1 1 I am currently working on automatic updates for Passbook (wallet) tickets and am experiencing some trouble using the Pushsharp library by Redth. I am using a Push notification certificate from the apple developer portal. I have tried to export my certificate as .p12, .pem and tried to use only the private key as .12 or .pem but nothing works. This is my full certificate (information is blanked out for security reasons): https://cdn.pbrd.co/images/HUJtb7b.png I dont have enough reputation to post images so a link is all i can provide. var succeeded = 0; var failed = 0; var attempted = 0; var config = new ApnsConfiguration(ApnsConfiguration.ApnsServerEnvironment.Sandbox, ConfigManager.CertPath + "PushCertificateV2.p12", ConfigManager.lvppass, fa...
            Read more