清除按钮的JavaScript计算器问题
[英]JavaScript Calculator issue with clear button
问题描述
我使用javaScript制作了一个计算器，除了清除按钮外，它均有效。
我希望屏幕在按下后变为空白，但由于某种原因，屏幕仅显示“清除”。
我以为该语句将在按下按钮后清除空格。。。。但是，它似乎没有任何作用。
if(buttonValues == 'Clear') {
input.innerHTML = '';
onlyDecimal = false;
}
这是我的在线计算器http://calculator.noahalexfarr.com/calculator.html
这是我的完整代码。 感谢您的时间！
<!DOCTYPE html> <html> <head> <title>Calculator</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/prefixfree.min.js" type="text/javascript"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> </head> <body> <div id="calculator"> <div class="the_head"> <span class="clear">Clear</span> <div class="input_field"></div> </div> <div class="buttons"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> <span>.</span> <span class="eval">=</span> <span class="mathSymbols">+</span> <span class="mathSymbols">-</span> <span class="mathSymbols">*</span> <span class="mathSymbols">/</span> </div> </div> <script> //select calculators buttons var buttons = document.querySelectorAll('#calculator span'); var mathSymbols = ['+', '-', '*', '/']; var onlyDecimal = false; // click events for all buttons and functions for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function(e) { console.log('you clicked a button'); //gets input values var input = document.querySelector('.input_field'); var inputValues = input.innerHTML; var buttonValues = this.innerHTML; //this will refer to button Values //the clear button.....clears the calculator if (buttonValues == 'Clear') { input.innerHTML = ''; onlyDecimal = false; } //equals button, the result will be displayed in the input field if (buttonValues == '=') { var equals = inputValues; var lastSymbol = equals[equals.length - 1]; //check the last button pressed to ensure it was not a decimal or math symbol. if (mathSymbols.indexOf(lastSymbol) > -1 || lastSymbol == '.') equals = equals.replace(/.$/, ''); if (equals) input.innerHTML = eval(equals); onlyDecimal = false; } //math symbols are clicked else if (mathSymbols.indexOf(buttonValues) > -1) { //math symbols are clicked //get the last symbol pressed var lastSymbol = inputValues[inputValues - 1]; //only use a math symbol if the input field is NOT empty if (inputValues != '' && mathSymbols.indexOf(lastSymbol) == -1) { input.innerHTML += buttonValues; } //minus can be used if empty else if (inputValues == '' && buttonValues == '-') input.innerHTML += buttonValues; // Replaces the last math function pressed with the newly pressed function if (mathSymbols.indexOf(lastSymbol) > -1 && inputValues.length > 1) { input.innerHTML = inputValues.replace(/.$/, buttonValues); //$ is the end of the string, any math function used will be replaced } onlyDecimal = false; } // this will sure only one decimal is used so the user cannot enter something like 12.56.7.8 else if (buttonValues == '.') { if (!onlyDecimal) { input.innerHTML += buttonValues; onlyDecimal = true; } } //basic button functions else { input.innerHTML += buttonValues; } } } </script> </body> </html>
3 个解决方案
解决方案1
2 2015-10-16 00:21:58
您将要设置输入值，而不是内部html。
<!DOCTYPE html> <html> <head> <title>Calculator</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/prefixfree.min.js" type="text/javascript"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> </head> <body> <div id="calculator"> <div class="the_head"> <span class="clear">Clear</span> <div class="input_field"></div> </div> <div class="buttons"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> <span>.</span> <span class="eval">=</span> <span class="mathSymbols">+</span> <span class="mathSymbols">-</span> <span class="mathSymbols">*</span> <span class="mathSymbols">/</span> </div> </div> <script> //select calculators buttons var buttons = document.querySelectorAll('#calculator span'); var mathSymbols = ['+', '-', '*', '/']; var onlyDecimal = false; // click events for all buttons and functions for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function(e) { console.log('you clicked a button'); //gets input values var input = document.querySelector('.input_field'); var inputValues = input.innerHTML; var buttonValues = this.innerHTML; //this will refer to button Values //the clear button.....clears the calculator if (buttonValues == 'Clear') { input.val(''); onlyDecimal = false; } //equals button, the result will be displayed in the input field if (buttonValues == '=') { var equals = inputValues; var lastSymbol = equals[equals.length - 1]; //check the last button pressed to ensure it was not a decimal or math symbol. if (mathSymbols.indexOf(lastSymbol) > -1 || lastSymbol == '.') equals = equals.replace(/.$/, ''); if (equals) input.innerHTML = eval(equals); onlyDecimal = false; } //math symbols are clicked else if (mathSymbols.indexOf(buttonValues) > -1) { //math symbols are clicked //get the last symbol pressed var lastSymbol = inputValues[inputValues - 1]; //only use a math symbol if the input field is NOT empty if (inputValues != '' && mathSymbols.indexOf(lastSymbol) == -1) { input.innerHTML += buttonValues; } //minus can be used if empty else if (inputValues == '' && buttonValues == '-') input.innerHTML += buttonValues; // Replaces the last math function pressed with the newly pressed function if (mathSymbols.indexOf(lastSymbol) > -1 && inputValues.length > 1) { input.innerHTML = inputValues.replace(/.$/, buttonValues); //$ is the end of the string, any math function used will be replaced } onlyDecimal = false; } // this will sure only one decimal is used so the user cannot enter something like 12.56.7.8 else if (buttonValues == '.') { if (!onlyDecimal) { input.innerHTML += buttonValues; onlyDecimal = true; } } //basic button functions else { input.innerHTML += buttonValues; } } } </script> </body> </html>
解决方案2
1 2015-10-16 00:43:21
我想如果您错过了else if 。 问题在于，它仍然会在最后敲击else块（ input.innerHTML += buttonValues; ）来附加值。
我认为您的代码应为：
if (buttonValues == 'Clear') {
input.innerHTML = '';
onlyDecimal = false;
} else if (buttonValues == '=') {
}
// .......
解决方案3
1 已采纳 2015-10-16 01:11:21
增加return; 清理后。 如
if (buttonValues == 'Clear') {
input.innerHTML = "";
onlyDecimal = false;
// do not continue making decisions, clear the box and exit
return;
}
（已更新，以使上面显示的代码与下面运行的代码匹配）
请参阅下面的运行代码：
<!DOCTYPE html> <html> <head> <title>Calculator</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/prefixfree.min.js" type="text/javascript"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> </head> <body> <div id="calculator"> <div class="the_head"> <span class="clear">Clear</span> <div class="input_field"></div> </div> <div class="buttons"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> <span>.</span> <span class="eval">=</span> <span class="mathSymbols">+</span> <span class="mathSymbols">-</span> <span class="mathSymbols">*</span> <span class="mathSymbols">/</span> </div> </div> <script> //select calculators buttons var buttons = document.querySelectorAll('#calculator span'); var mathSymbols = ['+', '-', '*', '/']; var onlyDecimal = false; // click events for all buttons and functions for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function(e) { console.log('you clicked a button'); //gets input values var input = document.querySelector('.input_field'); var inputValues = input.innerHTML; var buttonValues = this.innerHTML; //this will refer to button Values //the clear button.....clears the calculator if (buttonValues === 'Clear') { input.innerHTML = ""; onlyDecimal = false; return; } //equals button, the result will be displayed in the input field if (buttonValues == '=') { var equals = inputValues; var lastSymbol = equals[equals.length - 1]; //check the last button pressed to ensure it was not a decimal or math symbol. if (mathSymbols.indexOf(lastSymbol) > -1 || lastSymbol == '.') equals = equals.replace(/.$/, ''); if (equals) input.innerHTML = eval(equals); onlyDecimal = false; } //math symbols are clicked else if (mathSymbols.indexOf(buttonValues) > -1) { //math symbols are clicked //get the last symbol pressed var lastSymbol = inputValues[inputValues - 1]; //only use a math symbol if the input field is NOT empty if (inputValues != '' && mathSymbols.indexOf(lastSymbol) == -1) { input.innerHTML += buttonValues; } //minus can be used if empty else if (inputValues == '' && buttonValues == '-') input.innerHTML += buttonValues; // Replaces the last math function pressed with the newly pressed function if (mathSymbols.indexOf(lastSymbol) > -1 && inputValues.length > 1) { input.innerHTML = inputValues.replace(/.$/, buttonValues); //$ is the end of the string, any math function used will be replaced } onlyDecimal = false; } // this will sure only one decimal is used so the user cannot enter something like 12.56.7.8 else if (buttonValues == '.') { if (!onlyDecimal) { input.innerHTML += buttonValues; onlyDecimal = true; } } //basic button functions else { input.innerHTML += buttonValues; } } } </script> </body> </html>
为 javascript 计算器创建清晰的按钮代码
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.