Basic Calculator - event binding using pure javascript

问题

I am completely new to the Javascript .When I am looking to get the value to the button its get failed.I already given the setEvent.Like getEle(); And also bind the click function, Now i want to get the input values and perform mathematical calculations.

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

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

Hope this will work out.

回答2:

You can print the values to the screen by using document.getElementById("number").innerHTML = this.value.

Notie that it is not jquery, when calling getElementById you don't do("#id") only ("id"), JavaScript will match the string with the desired Id.

In jquery, it is much like the behavior of css, so in order to find ID you don't do getElementById instead, you just do

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

which is equivalent to java script's getElementById.

来源：https://stackoverflow.com/questions/30883850/basic-calculator-event-binding-using-pure-javascript

标签

javascript

javascript-events