Basic Calculator -使用纯javascript的事件绑定
Basic Calculator -使用纯javascript的事件绑定
提问于 2015-06-17 06:32:55
对于Javascript .When，我是完全陌生的，我希望将值获得到它的get失败按钮上，我已经给出了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="/">÷</button>
<button class="undo" value="-1">←</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="*">×</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=".">∙</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);
});回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-18 06:37:13
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;
});希望这会成功。
Stack Overflow用户
发布于 2015-06-17 07:04:55
您可以使用document.getElementById("number").innerHTML = this.value将这些值打印到屏幕上。
注意，它不是jquery，当调用getElementById时，您并不只执行(“# Id”) ("id")，JavaScript将将字符串与所需的Id匹配。
在jquery中，它非常类似于css的行为，因此为了找到ID，您不执行getElementById操作，只需执行以下操作
//$ means jquery $("#id")
这相当于java脚本的getElementById。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30883850
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号