Question

我试图用JavaScript做简单的计算器。我的代码远非完美，但是现在我只想修复bug。首先，我无法弄清楚如何阻止运营商传播。我的意思是例如我点击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);

Answer 1

试试这个：

＆＃13;

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);

＆＃13;

Answer 2

最好的方法是检查最后一个字符是什么。如果它是与单击的操作不同的操作，则将其替换为新操作。如果它是等于你防止重复它。
试试这个：

＆＃13;

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);

＆＃13;

简单的计算器 - 如何在一次点击后停止按钮点击

2 个答案: