0
我正試圖在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);
禁用按鈕，直到其它按鈕被再次點擊？ –