stackoom
  简体   繁体   中英

JavaScript Calculator issue with clear button

 原文  2015-10-16 00:15:53  4   3    javascript/ html/ calculator

Question

I made a calculator using javaScript and it works except for the clear button.

I want the screen to go blank after it is pressed, but for some reason the screen just reads 'Clear'.

I assumed this statement would clear the space after the button was pressed.... but alas it does not appear to do anything. 

if(buttonValues == 'Clear') {
   input.innerHTML = '';
   onlyDecimal = false;
}

Here is my calculator online http://calculator.noahalexfarr.com/calculator.html

Here is my full code. Thank you for your time! 

 <!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 answers

solution1
 2  2015-10-16 00:21:58

You'll want to set the value of the input instead of the inner 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>

solution2
 1  2015-10-16 00:43:21

I think you're missing an else if . The problem is that it still hits the else block at the end ( input.innerHTML += buttonValues; ) to append the value.

I think your code should read: 

if (buttonValues == 'Clear') {
    input.innerHTML = '';
    onlyDecimal = false;
} else if (buttonValues == '=') {
}
// .......

solution3
 1 ACCPTED  2015-10-16 01:11:21

Add return; after clearing. As in, 

if (buttonValues == 'Clear') {
    input.innerHTML = "";
    onlyDecimal = false;
    // do not continue making decisions, clear the box and exit
    return;  
}

( Updated to make code shown above match code running below)

See running code below: 

 <!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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Creating a clear button code for a javascript calculator Calculator clear button How to have clear button on my calculator using javascript Why Clear Button doens't work in my Javascript Calculator? Javascript Multiplication issue in Calculator Javascript Calculator Issue with Array Javascript calculator issue Calculator with some Button in JavaScript Making All clear button work on a Calculator Javascript Calculator will not clear after answer is given
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM