基本計算器-使用純JavaScript進行事件綁定

Question

我是Java語言的新手。當我希望將值獲取到按鈕時，它會失敗。我已經給了setEvent.Like getEle（）;。 並且還綁定了click函數，現在我想獲取輸入值並執行數學計算。

<!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

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

希望這能解決。

Answer 2

您可以使用document.getElementById（“ number”）。innerHTML = this.value將這些值打印到屏幕上。

請注意，它不是jquery，在調用getElementById時，您不只是執行（“ #id”）（“ id”），JavaScript會將字符串與所需的ID匹配。

在jquery中，它非常類似於CSS的行為，因此，要查找ID，您不必執行getElementById，而只需執行

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

這等效於Java腳本的getElementById。

基本計算器-使用純JavaScript進行事件綁定

問題描述

2 個解決方案

解決方案1
1 已采納 2015-06-18 06:37:13

解決方案2
0 2015-06-17 07:04:55

基本計算器-使用純JavaScript進行事件綁定

問題描述

2 個解決方案

解決方案1 1 已采納 2015-06-18 06:37:13

解決方案2 0 2015-06-17 07:04:55

解決方案1
1 已采納 2015-06-18 06:37:13

解決方案2
0 2015-06-17 07:04:55