簡單的計算器-如何在單擊后停止按鈕單擊
[英]Simple calculator - how to stop button click after one click
問題描述
我正在嘗試用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);
2 個解決方案
解決方案1
0
嘗試這個：
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 var disable = false; //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'){ disable = false document.querySelector('#result').innerHTML += e.target.value; } // trigered when operators are clicked if(e.target.className === 'btnOper'){ if(!disable){ document.querySelector('#result').innerHTML += e.target.value; disable = true; } } // trigered when equality button is clicked if(e.target.className === 'btnEql'){ document.querySelector('#result').innerHTML = eval(output); } } }, false);
解決方案2
0 已采納 2017-08-03 18:53:40
最好的方法是檢查最后一個字符是什么。 如果該操作與單擊的操作不同，則將其替換為新的操作。 如果相等，則防止重復。
嘗試這個：
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 var disable = false; //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 if(disable){ document.querySelector('#result').innerHTML = ''; disable = false; } 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'){ //operations on a list var charsToSearch = ["+","-","*","/","%"]; //check what was the last char var lastChar = document.querySelector('#result').innerHTML.slice(-1); //if last char was a different operation, replace it with new if(e.target.value != lastChar){ if(charsToSearch.indexOf(lastChar) != -1){ var str = document.querySelector('#result').innerHTML.slice(0, -1); str = str + e.target.value; document.querySelector('#result').innerHTML = str; return; } } switch(lastChar){ case '+': return; case '-': return; case '*': return; case '/': return; } document.querySelector('#result').innerHTML += e.target.value; } // trigered when equality button is clicked if(e.target.className === 'btnEql'){ document.querySelector('#result').innerHTML = eval(output); disable = true; } } }, false);
單擊按鈕后如何停止按鍵功能
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.