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

时间:2015-06-17 06:32:56

标签: javascript javascript-events

我对Javascript完全不熟悉。当我想要获取按钮的值时,它会失败。我已经给了setEvent.Like getEle(); 并绑定click函数,现在我想获取输入值并执行数学计算。

class AnotherClass
{
    public void updategui()
    {
        Form1 mainform = new Form1();
        mainform.AppendText("Say Hi");

    }

}

的javascript

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

2 个答案:

答案 0 :(得分: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;
  });

希望这会成功。

答案 1 :(得分:0)

您可以使用document.getElementById(&#34; number&#34;)。innerHTML = this.value将值打印到屏幕。

Notie认为它不是jquery,在调用getElementById时你不做(&#34;#id&#34;)只有(&#34; id&#34;),JavaScript会将字符串与期望的Id。

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

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

相当于java脚本的getElementById。