具有Sqrt，COS，SIN，日志和后退按钮的OnlineCalculator

时间：2015-10-23 21:39:23

标签： javascript html

我一直在研究在线计算器程序，但是我的按钮无法正常工作。我不知道为什么这不起作用，因为我已经完成了所有的逻辑和一切。我只需要按钮即可工作。我正在检索我的按钮并将它们放入2个阵列中：

var operatorEl = document.getElementsByClassName('operator');
var btnElements = document.getElementsByClassName('addme');

这是我的JavaScript代码：

   <script type="text/javascript">
       // Addings operators
       var operatorEl = document.getElementsByClassName('operator');
       // Adding btnElements
       var btnElements = document.getElementsByClassName('addme');
       //var to store user input and button input
       var inputVal = '';
       var buttonVal = '';

       function clearContent(){
           document.getElementById('display').textContent = '';
       }
       operatorEl[0].onclick = clearContent;

       function backBtn() {
           var dvLength = buttonVal.length;
           buttonVal.substring(0,dvLength);
           document.getElementById('display').textContent = buttonVal;
       }
       operatorEl[1].onclick = backBtn;

       function calcCos(){
           inputVal = document.getElementById('display').value;
           var newVal = Math.cos(inputVal);
           document.getElementById('display').innerHTML = newVal;
       }
       operatorEl[2].onclick = calcCos;

       function calcSin() {
           inputVal = document.getElementById('display').value;
           var newVal = Math.sin(inputVal);
           document.getElementById('display').innerHTML = newVal;
       }
       operatorEl[3].onclick = calcSin;

       function calcSqrt(){
           inputVal = document.getElementById('display').value;
           if(inputVal < 0){
               document.getElementById('error-msg').textContent = 'Cannot calculate the square root of a negative number.';
               document.getElementById('display').textContent = '';
           }

           var newVal = Math.sqrt(inputVal);
           document.getElementById('display').innerHTML = newVal;
       }    
       operatorEl[4].onclick = calcSqrt;

       function calcLog(){
           inputVal = document.getElementById('display').value;
           if(inputVal < 1){
               document.getElementById('error-msg').textContent = 'Cannot calculate the log of a non-positive number.';
               document.getElementById('display').textContent = '';
           }

           var newVal = Math.log(inputVal);
           document.getElementById('display').innerHTML = newVal;
       }
       operatorEl[5].onclick = calcLog;

       //When clicked the button's value will be added to the buttonVal and put into display
       for(var i = 0; i < btnElements.length; i++){
           if(btnElements[i].onclick){
               buttonVal += btnElements[i].value;
               document.getElementById('display').innerHTML = buttonVal;
           }
       }

       function evaluate(){
           var evaluatedOutput = eval(buttonVal);
           document.getElementById('display').innerHTML = evaluatedOutput;
       }
       operatorEl[6].onclick = evaluate;
</script>

这就是我所有的JS代码。当我检查调试器时没有错误，但没有按钮工作或显示他们应该的输入。我相信所有的逻辑都是完全合理的。

无论如何，任何和所有的帮助将不胜感激。我猜我搞砸了我的按钮在数组中不正确或者是那种效果。它也可能是.textContent或.innerHTML的东西，这些对我来说仍然有点混乱，我偶尔会混淆它们。

感谢您的帮助。

以下是有人要求的HTML内容：

        <body >
  <div class="container">
    <h1 id='h1'>Online Calculator</h1>
    <div class='col-md-6' id='calc-box'>
      <table class='table table-bordered'>
        <tr>
            <td align="center" colspan="5">
                <input id="display" type="text" class="form-control display" /></td>
        </tr>
        <tr>
            <td><input id="button11" type="button" value="CE" class="btn operator" /></td>
            <td><input id="button12" type="button" value="Back" class="btn operator" /></td>
            <td><input id="button13" type="button" value="(" class="btn addme" /></td>
            <td><input id="button14" type="button" value=")" class="btn addme" /></td>
            <td><input id="button15" type="button" value="+" class="btn addme" /></td>
        </tr>
        <tr>
            <td><input id="button21" type="button" value="COS" class="btn operator" /></td>
            <td><input id="button22" type="button" value="7" class="btn addme"  /></td>
            <td><input id="button23" type="button" value="8" class="btn addme"  /></td>
            <td><input id="button24" type="button" value="9" class="btn addme"  /></td>
            <td><input id="button25" type="button" value="-" class="btn addme" /></td>
        </tr>
        <tr>
            <td><input id="button31" type="button" value="SIN" class="btn operator" /></td>
            <td><input id="button32" type="button" value="4" class="btn addme"  /></td>
            <td><input id="button33" type="button" value="5" class="btn addme"  /></td>
            <td><input id="button34" type="button" value="6" class="btn addme"  /></td>
            <td><input id="button35" type="button" value="*" class="btn addme" /></td>
        </tr>
        <tr>
            <td><input id="button41" type="button" value="SQRT" class="btn operator" /></td>
            <td><input id="button42" type="button" value="1" class="btn addme"  /></td>
            <td><input id="button43" type="button" value="2" class="btn addme"  /></td>
            <td><input id="button44" type="button" value="3" class="btn addme"  /></td>
            <td><input id="button45" type="button" value="/" class="btn addme" /></td>
        </tr>
        <tr>
            <td><input id="button51" type="button" value="log" class="btn operator" /></td>
            <td><input id="button52" type="button" value="0" class="btn addme"    /></td>
            <td><input id="button53" type="button" value="." class="btn addme" /></td>
            <td colspan="2"><input id="button54" type="button" value="=" class="btn operator" /></td>
        </tr>
      </table>
      <div id='error-msg'></div>
    </div>
   </div>

2 个答案:

答案 0 :(得分：1)

您尚未为控件提供HTML。但是，你有一个if语句，而不是为'addme'分类按钮的onclick定义一个函数。

您的代码应为：

for (var i = 0; i < btnElements.length; i++) {
  btnElements[i].onclick = function() {
    buttonVal += this.value;
    document.getElementById('display').innerHTML = buttonVal;
  }
}

使用其余代码，我可以看到其他问题。所以：

当您使用<input>进行显示时，请在所有设置上使用value属性并为其检索数据。

您拥有的后退按钮代码（如@Thanasis Grammatopoulo所述）返回一个值，但您尚未存储它以供使用。此外，您还没有缩小字符串的大小 - 它与检索时的大小相同。所以我也纠正过了。

我不是一遍又一遍地使用getElementById，而是将元素放入函数可访问的变量中。

那应该解决功能问题...... 

      < script type = "text/javascript" >
       // Addings operators
       var operatorEl = document.getElementsByClassName('operator');
      // Adding btnElements
     var btnElements = document.getElementsByClassName('addme');
      //var to store user input and button input
     var inputVal = '';
     var buttonVal = '';
     var display = document.getElementById('display');
     var errorMsg = document.getElementById('error-msg');

     function clearContent() {
       display.value = '';
       buttonVal = '';
       inputVal = '';
     }
     operatorEl[0].onclick = clearContent;

     function backBtn() {
       var dvLength = buttonVal.length;
       var reducedInput = buttonVal.substring(0, dvLength - 1);
       display.value = reducedInput;
     }
     operatorEl[1].onclick = backBtn;

     function calcCos() {
       inputVal = display.value;
       var newVal = Math.cos(inputVal);
       display.value = newVal;
     }
     operatorEl[2].onclick = calcCos;

     function calcSin() {
       inputVal = display.value;
       var newVal = Math.sin(inputVal);
       display.value = newVal;
     }
     operatorEl[3].onclick = calcSin;

     function calcSqrt() {
       inputVal = display.value;
       if (inputVal < 0) {
         errorMsg.innerHTML = 'Cannot calculate the square root of a negative number.';
         display.value = '';
       }

       var newVal = Math.sqrt(inputVal);
       display.value = newVal;
     }
     operatorEl[4].onclick = calcSqrt;

     function calcLog() {
       inputVal = display.value;
       if (inputVal < 1) {
         errorMsg.innerHTML = 'Cannot calculate the log of a non-positive number.';
         display.value = '';
       }

       var newVal = Math.log(inputVal);
       display.value = newVal;
     }
     operatorEl[5].onclick = calcLog;

      //When clicked the button's value will be added to the buttonVal and put into display
     for (var i = 0; i < btnElements.length; i++) {
       btnElements[i].onclick = function() {
         buttonVal += this.value;
         display.value = buttonVal;
       }
     }

     function evaluate() {
       var evaluatedOutput = eval(buttonVal);
       display.value = evaluatedOutput;
     }
     operatorEl[6].onclick = evaluate; < /script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
</head>

<body>
  <div class="container">
    <h1 id='h1'>Online Calculator</h1>
    <div class='col-md-6' id='calc-box'>
      <table class='table table-bordered'>
        <tr>
          <td align="center" colspan="5">
            <input id="display" type="text" class="form-control display" />
          </td>
        </tr>
        <tr>
          <td>
            <input id="button11" type="button" value="CE" class="btn operator" />
          </td>
          <td>
            <input id="button12" type="button" value="Back" class="btn operator" />
          </td>
          <td>
            <input id="button13" type="button" value="(" class="btn addme" />
          </td>
          <td>
            <input id="button14" type="button" value=")" class="btn addme" />
          </td>
          <td>
            <input id="button15" type="button" value="+" class="btn addme" />
          </td>
        </tr>
        <tr>
          <td>
            <input id="button21" type="button" value="COS" class="btn operator" />
          </td>
          <td>
            <input id="button22" type="button" value="7" class="btn addme" />
          </td>
          <td>
            <input id="button23" type="button" value="8" class="btn addme" />
          </td>
          <td>
            <input id="button24" type="button" value="9" class="btn addme" />
          </td>
          <td>
            <input id="button25" type="button" value="-" class="btn addme" />
          </td>
        </tr>
        <tr>
          <td>
            <input id="button31" type="button" value="SIN" class="btn operator" />
          </td>
          <td>
            <input id="button32" type="button" value="4" class="btn addme" />
          </td>
          <td>
            <input id="button33" type="button" value="5" class="btn addme" />
          </td>
          <td>
            <input id="button34" type="button" value="6" class="btn addme" />
          </td>
          <td>
            <input id="button35" type="button" value="*" class="btn addme" />
          </td>
        </tr>
        <tr>
          <td>
            <input id="button41" type="button" value="SQRT" class="btn operator" />
          </td>
          <td>
            <input id="button42" type="button" value="1" class="btn addme" />
          </td>
          <td>
            <input id="button43" type="button" value="2" class="btn addme" />
          </td>
          <td>
            <input id="button44" type="button" value="3" class="btn addme" />
          </td>
          <td>
            <input id="button45" type="button" value="/" class="btn addme" />
          </td>
        </tr>
        <tr>
          <td>
            <input id="button51" type="button" value="log" class="btn operator" />
          </td>
          <td>
            <input id="button52" type="button" value="0" class="btn addme" />
          </td>
          <td>
            <input id="button53" type="button" value="." class="btn addme" />
          </td>
          <td colspan="2">
            <input id="button54" type="button" value="=" class="btn operator" />
          </td>
        </tr>
      </table>
      <div id='error-msg'></div>
    </div>
  </div>
</body>

</html>

答案 1 :(得分：0)

  • 清除按钮

    您还需要清除变量，而不仅仅是屏幕。

    inputVal = ''; buttonVal = '';

  • 后退按钮 Substring返回新字符串，因此您必须保存它。 http://www.w3schools.com/jsref/jsref_substring.asp

  • 修改你获得的方式并设置元素的值

    您使用：

    • document.getElementById('display').value
    • document.getElementById('display').innerHTML
    • document.getElementById('display').textContent

    您可能只想使用一种方式，因为您可能会得到不同的值。

  • 修复计算器的错误检查

    例如，在检查sqr下的数字是否为正数后，请不要继续执行代码。

按钮元素上的onclick事件是错误的

//When clicked the button's value will be added to the buttonVal and put into display
for(var i = 0; i < btnElements.length; i++){
    if(btnElements[i].onclick){
        buttonVal += btnElements[i].value;
        document.getElementById('display').innerHTML = buttonVal;
    }
}

必须变得像...... 

//When clicked the button's value will be added to the buttonVal and put into display
// For each button
for(var i = 0; i < btnElements.length; i++){
    // Bind event on element
    btnElements[i].onclick = function(){
        // varible 'this' holds the element
        buttonVal += this.value;
        document.getElementById('display').innerHTML = buttonVal;
    };
}
相关问题
最新问题