基本计算器 - 使用纯 JavaScript 进行事件绑定答案

【问题标题】：Basic Calculator - event binding using pure javascript基本计算器 - 使用纯 JavaScript 进行事件绑定
【发布时间】：2015-06-17 06:32:55
【问题描述】：

我对 Javascript 完全陌生。当我想获取按钮的值时，它会失败。我已经给出了 setEvent.Like getEle(); 并且还绑定了点击功能，现在我想获取输入值并执行数学计算。

<!DOCTYPE html>
   <html>
   <head>
      <title>Simple Calculator</title>
     <link rel="stylesheet" type="text/css" href="calculator.css">
    </head>
 <body>
    <div id="container" >
       <div class="calculator">
           <ul>
              <li>
                  <div id="display">
                    <span id="math"></span>
                    <span id="number"></span>
                </div>
            </li>
            <li>
                <button class="input" value="7">7</button>
                <button class="input" value="8">8</button>
                <button class="input" value="9">9</button>
                <button class="control" value="/">&#247;</button>
                <button class="undo" value="-1">&#8592;</button>
            </li>
            <li>
                <button class="input" value="4">4</button>
                <button class="input" value="5">5</button>
                <button class="input" value="6">6</button>
                <button class="control" value="*">&#215;</button>
                <button class="clear">C</button>
            </li>
            <li>
                <button class="input" value="1">1</button>
                <button class="input" value="2">2</button>
                <button class="input" value="3">3</button>
                <button class="control" value="-">-</button>
                <button class="control" value="%">%</button>
            </li>
            <li>
                <button class="input size2" value="0">0</button>
                <button class="input" value=".">&#8729;</button>
                <button class="control" value="+">+</button>
                <button class="submit">=</button>
                  </li>
               </ul>
          </div>
       </div>
   </body>
   <script type="text/javascript" src="calculator.js"></script>
  </html>

javascript

function setEvent(evt, ele, callback) {
   var ele = getEle(ele);
    if (ele.length === undefined) {
    ele.addEventListener(evt, callback, false);        
    } else if(ele.length > 0) {
       for (var i=0; i<ele.length; i++) {
        ele[i].addEventListener(evt, callback, false);
    }
  }
  return false;
}

function getEle(ele) {
  var _idf = ele.charAt(0);
   if (_idf == "#") {
    var _ele = document.getElementById(ele.substr(1));
    return _ele;
  } else if(_idf == ".") {
    var _els = document.getElementsByClassName(ele.substr(1));
    return _els;
  }
  return ele;
 }

setEvent("click", ".input", function() { 
  console.log(this.value);
 });

setEvent("click", ".control", function() { 
  console.log(this.value);
 });

【问题讨论】：

我把它放在JSFIDDLE 中，它似乎工作正常，你到底期待什么，你得到什么意外？
jsfiddle.net/arunpjohny/9n8eeob1/1 - 看起来不错
我如何在#display 中打印这些值及其计算
在您更新问题后：您走的是正确的道路。您可以从已点击的按钮中获取值，同样您可以使用this.value 将其添加到#number ......提示：document.getElementById("#number").innerHTML = this.value
旁注：你可以使用getEle 代替你的函数document.querySelector 或document.querySelectorAll

标签： javascript javascript-events

【解决方案1】：

function setEvent(evt, ele, callback) {
    var ele = getEle(ele);
    if (ele.length === undefined) {
        ele.addEventListener(evt, callback, false);        
    } else if(ele.length > 0) {
        for (var i=0; i<ele.length; i++) {
            ele[i].addEventListener(evt, callback, false);
        }
    }
    return false;
    }

function getEle(ele) {
    var _idf = ele.charAt(0);
    if (_idf == "#") {
        var _ele = document.getElementById(ele.substr(1));
        return _ele;
    } else if(_idf == ".") {
        var _els = document.getElementsByClassName(ele.substr(1));
        return _els;
    }
    return ele;
    }

function getInnerHtml(id) {
     return document.getElementById(id).innerHTML;                   
   }
function getValue(elem) {
  return elem.value;
  }

setEvent("click", ".input", function() { 
  console.log(this.value);
  var _num = getInnerHtml("number");
  _num = _num + "" + getValue(this);
  document.getElementById("number").innerHTML = _num;
    });

setEvent("click", ".control", function() { 
  console.log(this.value);
  var _num1 = document.getElementById("number").innerHTML;
  _num1 = _num1 + "" + this.value;
  document.getElementById("number").innerHTML = _num1;
  });
setEvent("click", ".clear", function() { 
  console.log(this.value);
  var _num1 = document.getElementById("number").innerHTML;
  _num1 = "";
  document.getElementById("number").innerHTML = _num1;
  });
setEvent("click", ".submit", function() { 
  console.log(this.value);
   var _num1 = document.getElementById("number").innerHTML;
  _num1 = eval( _num1 + "" + getValue(this));
  document.getElementById("number").innerHTML = _num1;
  });

希望这会成功。

【讨论】：

【解决方案2】：

您可以使用 document.getElementById("number").innerHTML = this.value 将值打印到屏幕上。

注意它不是 jquery，当你调用 getElementById 时你不只做 ("#id") ("id")，JavaScript 会将字符串与所需的 Id 匹配。

在 jquery 中，它很像 css 的行为，所以为了找到 ID 你不做 getElementById 而是做

//$ means jquery $("#id")

相当于java脚本的getElementById。

【讨论】：