2017-09-28 21 views
0

我无法弄清楚如何更新我正在处理的JavaScript计算器的全局变量。我知道使用eval会使这变得更容易,但是从我在线阅读的内容来看,不建议从用户输入中评估。更新全局变量为javascript计算器

我的想法是存储操作前来的第一个数字点击。点击后,存储第二个数字,然后查看用户出现的操作,其中'='或'+/* - '执行相应的操作。我还没有完成CE或AC或'。'按钮呢。完全没有意义,如果我不能更新全局变量。

在函数本身中,我可以改变变量firstNum和secondNum。 从我在线阅读的内容中,我相信我不会更改全局变量,而是变量的本地实例。

我希望能指出正确的方向来完成这件事。我试图将数字存储在一个对象中,然后在需要执行操作时引用该对象,但我不相信自从我收到参考错误后我做得很对。

预先感谢您。

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; 
} 
+0

你可以使用eval来达到这个目的;这将是eval()的最佳用法之一,并使许多事情变得更简单。要避免的是eval()其他用户的内容,而不是你自己的;任何人都可以按[F12]来运行他们自己的代码... – dandavis

回答

0

你正在引用全局变量好,问题是全局变量theParent。大多数情况下,浏览器在加载文档之前执行javascript,因此找不到任何id为#container的元素。

为了解决这个问题,您可以声明全局变量,并在加载文档时定义它。

var theParent; 

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

类似的显示变量。

希望这会有所帮助。

+0

我认为适当的事件监听器是'document.addEventListener(“DOMContentLoaded()=> {})”'。 – Andrew

+1

嗯,这里没有什么比这更适合了:参考这个答案 https://stackoverflow.com/a/6348597/5810092 –

+0

但是我犯了一个错误,我现在编辑它,虽然 –