的Javascript文本輸入計算器

我有些新的JavaScript，我試圖讓，擁有3個文本輸入，第一個數字文本框，操作文本，以及第二號文本基本的計算器，但它不當我點擊一個按鈕或使用任何其他方法觸發事件時，打印出文本。這是我的代碼：的Javascript文本輸入計算器

<html> 
<script> 
function calc() 
{ 
    var D = ""; 
    var A = document.getElementById("num1").value; 
    var B = document.getElementById("op").value; 
    var C = document.getElementById("num2").value; 
    if(B == "+") 
    { 
     D = A+C; 
    } 
    elseif(B == "-") 
    { 
     D = A-C; 
    } 
    elseif(B == "*") 
    { 
     D = A*C; 
    } 
    elseif(B == "/") 
    { 
     D = A/C; 
    } 
    document.getElementById("result").innerHTML = D; 
} 
</script> 

<body> 
    <input type="text" id="num1" name="num1" /> 
    <input type="text" id="op" name="op" /> 
    <input type="text" id="num2" name="num2" /> 
    <br /> 
    <input type="button" value="Solve" onclick="calc()" /> 

    <p id="result" name="r1"> 
     <br /> 
    </p> 

</body> 
</html>

來源

2013-04-14 Brian Johnson

把你的腳本到頁面底部，並使用parseFloat（A，10）和相同的基於C – Givi

這else if不elseif。你也需要在A + C上使用parseInt，否則它會把你的字符串當作......好吧，字符串。你應該在瀏覽器中看到elseif錯誤。你在用螢火蟲嗎？如果你不是，開始。讓工具爲你做好工作。

來源

2013-04-14 00:50:14 aquinas

（⌒▽⌒）謝謝，我沒有意識到否則如果。 –

我建議以下（代碼本身的註釋說明）：

function calc() { 
     /* finds out whether the browser uses textContent (Webkit, Opera, Mozilla...) 
      or innerText (Microsoft) to set the text of an element/node */ 
    var textType = Node.textContent ? 'textContent' : 'innerText', 
     /* uses parseFloat to create numbers (where possible) from the entered value 
      if parseFloat fails to find a number (it's empty or nonsensical) 
      then a 0 is used instead (to prevent NaN being the output). */ 
     num1 = parseFloat(document.getElementById('num1').value) || 0, 
     num2 = parseFloat(document.getElementById('num2').value) || 0, 
     // retrieves the result element 
     result = document.getElementById('result'); 

    // switch is used to avoid lots of 'if'/'else if' statements, 
    // .replace() is used to remove leading, and trailing, whitespace 
    // could use .trim() instead, but that'd need a shim for (older?) IE 
    switch (document.getElementById('op').value.replace(/\s/g,'')){ 
     // if the entered value is: 
     // a '+' then we set the result element's text to the sum 
     case '+': 
      result[textType] = num1 + num2; 
      break; 
     // and so on... 
     case '-': 
      result[textType] = num1 - num2; 
      break; 
     case '*': 
      result[textType] = num1 * num2; 
      break; 
     case '/': 
      result[textType] = num1/num2; 
      break; 
     // because people are going to try, give a default message if a non-math 
     // operand is used 
     default: 
      result[textType] = 'Seriously? You wanted to try math with that operand? Now stop being silly.' 
      break; 
    } 
}

JS Fiddle demo。

參考文獻：

parseFloat()。
switch() {...}。

來源

2013-04-14 01:12:11

我會做的事情有點不同，但回答你的問題，只是讓你的代碼工作，我做了以下內容：

這裏是你重做代碼：

<html> 
<script> 
function calc(form) { 

var D = "0"; 
var A = document.getElementById("num1").value; 
var B = document.getElementById("op").value; 
var C = document.getElementById("num2").value; 

if (B === "+") 
{ 
D = parseInt(A)+parseInt(C); 
} 
else if(B === "-") 
{ 
D = parseInt(A)-parseInt(C); 
} 
else if(B === "*") 
{ 
D = parseInt(A)*parseInt(C); 
} 
else if (B === "/") 
{ 
D = parseInt(A)/parseInt(C); 
} 
document.getElementById("result").innerHTML = D; 
return false; 
} 
</script> 
<body> 

<input type="text" id="num1" name="num1" /> 
<input type="text" id="op" name="op" /> 
<input type="text" id="num2" name="num2" /> 
<br /> 
<input type="button" value="Solve" onClick="calc(this)"> 

<p id="result" name="r1"> 
<br /> 
</p> 

</body> 
</html>

我用parseint（）是因爲您的if語句中的表達式處理了像文本這樣的值。

接下來，我們需要使用===三隻等於它說A是真的等於+或什麼都第二輸入值。

排名第三的是的onclick，我做了（這）和反饋的形式，你可以在上面寫着函數計算行看到。

爲了好的措施，我添加了一個返回false;以防止表單提交（但它沒有它會起作用）。

也像其他海報說，它是否則，如果不ELSEIF。

我希望這是有幫助的。再次，我會以不同的方式做事，但要讓它解釋一些事情。

來源

2013-04-14 01:49:47

只是一個說明... parseint（）處理整個數字，但parsefloat（）將處理小數位。上面海報的好思想。 –

有一種方法可以用一個單一輸入框做到這一點：

function findOps(s) { 
    for (var i = 0; i < s.length; i++) { 
    if (s[i] == "+") 
     return "+"; 
    if (s[i] == "-") 
     return "-"; 
    if (s[i] == "*") 
     return "*"; 
    if (s[i] == "/") 
     return "/"; 
    } 
} 
var input = ''; 
function calc() { 
    var dom = $("#input"); 
    input = dom.val(); 
    try { 
    switch (findOps(input)) { 
     case "+": 
     var a = input.split("+"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x + y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
     case "-": 
     var a = input.split("-"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x - y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
     case "*": 
     var a = input.split("*"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x * y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
     case "/": 
     var a = input.split("/"); 
     var x = parseFloat(a[0]); 
     var y = parseFloat(a[1]); 
     var res = x/y; 
     if (!isNaN(res)) { 
      setTimeout(function() { 
      dom.val(res.toFixed(3)); 
      dom.get(0).setSelectionRange(0, 0); 
      }, 150); 

     } 
     break; 
    } 

    } catch (err) { 
    alert("catched¡"); 
    } 

}

來源

2016-05-17 03:44:18 Cris

我建議使用的eval（）如果用戶輸入「5 + 6」或「（9×3）/ 5 「並將其設置爲一個變量，eval（）將解析並解決問題！

來源

2017-05-10 20:00:45

的Javascript文本輸入計算器

回答

相關問題