2014-09-21 101 views
0

我有這樣的HTML(只是一個簡單的計算器):簡單Calaculator不起作用

<html> 
    <head> 
    <script type="text/javascript" src="js/SimpleCalculator.js"></script> 
</head> 
<body> 
    <h2>Simple Calculator</h2> 
    <div class="calculator"> 
     <div class="display"><input type="text" readonly size="20" id="dsp"></div> 
     <div class="keys"> 
      <p><input type="button" value="7" onclick='getValue(this.value)'> 
       <input type="button" value="8" onclick='getValue(this.value)'> 
       <input type="button" value="9" onclick='getValue(this.value)'> 
       <input type="button" value="/" onclick='getValue(this.value)'> 
      </p> 
      <p><input type="button" value="4" onclick='getValue(this.value)'> 
       <input type="button" value="5" onclick='getValue(this.value)'> 
       <input type="button" value="6" onclick='getValue(this.value)'> 
       <input type="button" value="*" onclick='getValue(this.value)'> 
      </p> 
      <p><input type="button" value="1" onclick='getValue(this.value)'> 
       <input type="button" value="2" onclick='getValue(this.value)'> 
       <input type="button" value="3" onclick='getValue(this.value)'> 
       <input type="button" value="-" onclick='getValue(this.value)'> 
      </p> 
      <p><input type="button" value="0" onclick='getValue(this.value)'> 
       <input type="button" value="." onclick='getValue(this.value)'> 
       <input type="button" value="+" onclick='getValue(this.value)'></p> 
      <p><input type="button" value="C" onclick='getValue(this.value)'> 
       <input type="button" value="=" onclick='getValue(this.value)'></p> 
     </div> 
    </div> 
</body> 
</html> 

和JS文件:

var s = ''; 

function getValue(val){ 
alert(val); 

if (val != 'C' && val != '='){s += val; 
    document.getElementById("dsp").value+=val;} 
if (val === 'C') 
    document.getElementById("dsp").value = " "; 
if (val === '='){ 
    alert(document.getElementByVal("dsp").value); 
    var res = eval(s); 
    document.getElementByVal("dsp").value = res; 
} 
} 

將顯示鍵(數字和數學符號),警報正常工作,但不會顯示評估結果。我錯在哪裏?

+0

爲什麼要重新發明輪子...? http://www.javascriptkit.com/script/cut18.shtml – webeno 2014-09-21 12:06:22

回答

0

更改的最後一行用的getElementById,不getElementByVal

+0

是的。我的錯 – 2014-09-21 12:15:52

2

您應該使用getElementById而不是ByVal,這不是功能。

var s = ''; 
 

 
function getValue(val){ 
 

 
if (val != 'C' && val != '='){s += val; 
 
    document.getElementById("dsp").value+=val;} 
 
if (val === 'C') 
 
    document.getElementById("dsp").value = " "; 
 
if (val === '='){ 
 
    alert(document.getElementById("dsp").value); 
 
    var res = eval(s); 
 
    document.getElementById("dsp").value = res; 
 
} 
 
}
<h2>Simple Calculator</h2> 
 
    <div class="calculator"> 
 
     <div class="display"><input type="text" readonly size="20" id="dsp"></div> 
 
     <div class="keys"> 
 
      <p><input type="button" value="7" onclick='getValue(this.value)'> 
 
       <input type="button" value="8" onclick='getValue(this.value)'> 
 
       <input type="button" value="9" onclick='getValue(this.value)'> 
 
       <input type="button" value="/" onclick='getValue(this.value)'> 
 
      </p> 
 
      <p><input type="button" value="4" onclick='getValue(this.value)'> 
 
       <input type="button" value="5" onclick='getValue(this.value)'> 
 
       <input type="button" value="6" onclick='getValue(this.value)'> 
 
       <input type="button" value="*" onclick='getValue(this.value)'> 
 
      </p> 
 
      <p><input type="button" value="1" onclick='getValue(this.value)'> 
 
       <input type="button" value="2" onclick='getValue(this.value)'> 
 
       <input type="button" value="3" onclick='getValue(this.value)'> 
 
       <input type="button" value="-" onclick='getValue(this.value)'> 
 
      </p> 
 
      <p><input type="button" value="0" onclick='getValue(this.value)'> 
 
       <input type="button" value="." onclick='getValue(this.value)'> 
 
       <input type="button" value="+" onclick='getValue(this.value)'></p> 
 
      <p><input type="button" value="C" onclick='getValue(this.value)'> 
 
       <input type="button" value="=" onclick='getValue(this.value)'></p> 
 
     </div> 
 
    </div>