我正试图在JavaScript中做简单的计算器。我的代码远非完美,但现在我只想修复错误。 首先我想不通,如何阻止运营商传播。我的意思是,例如,我点击1 + 1 =一切正常,我得到正确的结果。 问题是,当我多次点击操作员时,我可以添加很多。如何在点击后禁用/停止运营商。我尝试了不同的方法:数按钮点击,为每个数字和运算符添加,但无济于事。简单的计算器 - 如何在一次点击后停止按钮点击
还有就是HTML代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EASY Calculator</title>
<link rel="stylesheet" href="css/calculator.css">
</head>
<body>
<script src="js/calculator.js"></script>
</body>
</html>
JavaScript代码:
// creating wrapper for all div's and append to HTML body tag
var myWraper = document.createElement('div');
myWraper.id = 'container';
document.body.appendChild(myWraper);
//function creating div's for calculator and buttons
function divCalc(divClass, btnInnerHTML) {
var div = document.createElement('div');
div.className = divClass;
div.innerHTML = btnInnerHTML;
return div;
}
// array of calclulator div's
var rowsCalc = [
divCalc('row1', '<button class="btnDel">Del</button><button class="btnOper" value="%">%</button><button class="btnOper" value="+">+</button>'),
divCalc('row2', '<button class="btnNum" value="7">7</button><button class="btnNum" value="8">8</button><button class="btnNum" value="9">9</button><button class="btnOper" value="-">-</button>'),
divCalc('row3', '<button class="btnNum" value="4">4</button><button class="btnNum" value="5">5</button><button class="btnNum" value="6">6</button><button class="btnOper" value="*">*</button>'),
divCalc('row4', '<button class="btnNum" value="1">1</button><button class="btnNum" value="2">2</button><button class="btnNum" value="3">3</button><button class="btnOper" value="/">/</button>'),
divCalc('row5', '<button class="btnNum" value="0">0</button><button class="btnNum" value=".">.</button><button class="btnEql" value="=">=</button>')
];
//function creating div's for page
function divPage(divID) {
var div = document.createElement('div');
div.id = divID;
return div;
}
// array of page div's
var rowsPage = [
divPage('result'),
divPage('main')
];
// using createDocumentFragment() method append all div's at once to page
var docFragPage = document.createDocumentFragment();
for (var i = 0; i < rowsPage.length; i += 1) {
docFragPage.appendChild(rowsPage[i]);
}
myWraper.appendChild(docFragPage); // appends all div's at once to 'container' div
// the same as above for calculator div's
var docFragCalc = document.createDocumentFragment();
for (var i = 0; i < rowsCalc.length; i += 1) {
docFragCalc.appendChild(rowsCalc[i]);
}
rowsPage[1].appendChild(docFragCalc); // appends all div's at once to 'main' div
//append event listener
document.querySelector('#container').addEventListener('click', function(e) {
// event only triger when pressed on buttons
if (e.target.tagName === 'BUTTON') {
// variable for output
var output = document.querySelector('#result').innerHTML;
// trigered when 'Del' button is clicked
if (e.target.className === "btnDel") {
document.querySelector('#result').innerHTML = '';
}
// trigered when numbers are clicked
if (e.target.className === 'btnNum') {
document.querySelector('#result').innerHTML += e.target.value;
}
// trigered when operators are clicked
if (e.target.className === 'btnOper') {
document.querySelector('#result').innerHTML += e.target.value;
}
// trigered when equality button is clicked
if (e.target.className === 'btnEql') {
document.querySelector('#result').innerHTML = eval(output);
}
}
}, false);
禁用按钮,直到其它按钮被再次点击? –