Update global variable for javascript Calculator

Question

I can't figure out how to update a global variable for a javascript calculator I am working on. I know using eval would make this a lot easier but from what I read online, eval from user input is not advised.

My idea is store the first number until an operation comes is clicked. Once that is clicked, store second number and then see what operation comes up by the user, where it is '=' or '+/*-' do the appropriate action. I have not completed the CE or AC or '.' buttons yet. There's no point in completely that if I can not update the global variable.

Within the function itself, I can change the variable firstNum and secondNum. From what I have read online, I believe I am not changing the global variable but the local instance of the variable.

I am hoping to be pointed in the right direction to get this done. I attempted to store in the number in an object and later reference that object when I needed to do an operation but I do not believe I did that quite right since I receiving a Reference Error.

Thank you in advance.

var theParent = document.querySelector("#container");
var display = document.querySelector("#display");
theParent.addEventListener("click", doSomething, false);
 var reg = new RegExp('^\\d+$');
var result=0;
var symbol='';
var firstNum=0;
var secondNum=0;




 function doSomething(e) {
    if (e.target !== e.currentTarget) {
        var clickedItem = e.target.innerHTML;
        if (reg.test(clickedItem)) {
            if (display.innerHTML==="0"){
               display.innerHTML=clickedItem;
           }
           else {
            display.innerHTML+=clickedItem;
            }
        }   
    }


   if (clickedItem==='='){
    console.log('check firstNum:' +firstNum);
    console.log('check symbol:'+ symbol);
    console.log('operations return: '+ operations(symbol));
        result= operations(symbol);
        console.log('result: '+ result);
        display.innerHTML=result;
        firstNum=result;
        secondNum=0;
        symbol='';
    }

   if (!(reg.test(clickedItem))&&symbol===' '&&clickedItem!=='=')
    {
            symbol=clickedItem;
            display.innerHTML='0';
            console.log('first op '+ symbol);
    }
    if (!(reg.test(clickedItem))&&symbol!==clickedItem&&clickedItem!=='=')  {
        solve(symbol);
        symbol=clickedItem;
        console.log('second op '+symbol);
    }


    if (symbol===''){

        //firstNum = parseInt(display.innerHTML);
        setFirstNum();
        console.log("this firstNum in If: " +firstNum)
    }

    else if (reg.test(clickedItem)){
        setSecondNum();
        console.log("this secondNum in If: " +secondNum)
    }
    else {display.innerHTML='0';}

    e.stopPropagation();
}


function setFirstNum(){
    window.firstNum=parseInt(display.innerHTML);
}

function setSecondNum(){
    window.secondNum=parseInt(display.innerHTML);
}

function operations(symbol){
var operation=[{
  '+':  firstNum + secondNum ,
  '-': firstNum - secondNum  ,
  '÷': firstNum/secondNum ,
  'X':  firstNum*secondNum 
}];
return operation[symbol];
}


function solve(symbol){
    result=operations(symbol);
        display.innerHTML=result;
        firstNum=result;
        secondNum=0;
}

you can use eval for that purpose; it would be one of the best uses for eval() and make a lot of things much simpler. the thing to avoid is eval()ing _other user's_ content, not your own; anyone can just press [F12] to run their own code... — dandavis, Sep 28 '17 at 06:46

Gurpreet Singh · Answer 1 · 2017-09-29T06:34:33.443

0

You are referencing the global variables fine, the problem is with the global variable theParent. Most of the times, the browser executes the javascript before it loads the document, and hence cannot find any element with id #container.

In order to fix this, you can declare the global variable, and define it on loading the document.

var theParent;

window.onload = function() { 
    theParent = document.querySelector("#container");
    theParent.addEventListener(...);
}

Similarly for the display variable.

Hope this helps.

edited Sep 29 '17 at 06:34

answered Sep 28 '17 at 06:13

Gurpreet Singh

129
7

I think the appropriate event listener for this is `document.addEventListener("DOMContentLoaded () => {})"`. – Andrew Sep 28 '17 at 06:19
1

Well there's nothing like more appropriate here: refer to this answer https://stackoverflow.com/a/6348597/5810092 – Gurpreet Singh Sep 28 '17 at 13:23
However I had made a mistake, I've edited it now though – Gurpreet Singh Sep 28 '17 at 13:25
1

You are correct. `document.onload` and `DOMContentLoaded` fire at the exact same event. – Andrew Sep 28 '17 at 18:47
1

This is odd. I attempted the above code and the 'doSomething()' function never actually fired. In fact, the javascript never executed. After changing 'document.onload' to window.onload. This is what I added: `window.onload = function() { theParent = document.querySelector("#container"); theParent.addEventListener("click", doSomething, false); // theParent.addEventListener(...); var display = document.querySelector("#display"); }` – Snorkals Sep 29 '17 at 02:39
I meant even with the new function, global variables,such as firstNum and secondNum, still remain as undefined. – Snorkals Sep 29 '17 at 02:48
I've changed document.onload to window.onload. Pardon my mistake. But that is odd. I tried the code, and it is definitely firing the doSomething function. Try putting a console.log at the beginning of the doSomething function. And look at the console if anything's coming up. – Gurpreet Singh Sep 29 '17 at 06:40
And the global variables are also printing out fine for me – Gurpreet Singh Sep 29 '17 at 06:41

Update global variable for javascript Calculator

1 Answers1