基本计算器 - 使用纯 javascript 的事件绑定

Question

我是 Javascript 的新手。当我想要获取按钮的值时，它的 get failed.I 已经给出了 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);
 });

Answer 1

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

请注意，它不是 jquery，在调用 getElementById 时，您不会只执行 ("#id") ("id")，JavaScript 会将字符串与所需的 ID。

在 jquery 中，它与 css 的行为非常相似，因此为了查找 ID，您不需要执行 getElementById，而只需执行

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

相当于 java 脚本的 getElementById。

Answer 2

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;
  });

希望这会成功。

基本计算器 - 使用纯 javascript 的事件绑定

Basic Calculator - event binding using pure javascript

javascript

javascript-events