stackoom
  简体   繁体   中英

Need to minimize Javascript Code using operator in Calculator

 原文  2022-03-03 10:01:44  4   2    javascript/ html/ css

Question

HTML, CSS and Javascript calculator. Need to make separate methods for operators, display digits by calling through HTML button tags BY ONCLICK and to minimize code. In case if there is + operator button pressed or presseddigit() function if digit button pressed replacing the livescreen() function. Code section below: 

 document.addEventListener("keydown", keyboardInputHandler); function keyboardInputHandler(e) { //grabbing the liveScreen let res = document.getElementById("result"); //numbers if (e.key === "0") { res.value += "0"; } else if (e.key === "1") { res.value += "1"; } else if (e.key === "2") { res.value += "2"; } else if (e.key === "3") { res.value += "3"; } else if (e.key === "4") { res.value += "4"; } else if (e.key === "5") { res.value += "5"; } else if (e.key === "6") { res.value += "6"; } else if (e.key === "7") { res.value += "7"; } else if (e.key === "7") { res.value += "7"; } else if (e.key === "8") { res.value += "8"; } else if (e.key === "9") { res.value += "9"; } //operators // if (e.key === "+") { // res.value += "+"; // } else if (e.key === "-") { // res.value += "-"; // } else if (e.key === "*") { // res.value += "*"; // } else if (e.key === "/") { // res.value += "/"; // } if (e.key === "+") { res.value += "+"; } else if (e.key === "-") { res.value += "-"; } else if (e.key === "*") { res.value += "*"; } else if (e.key === "/") { res.value += "/"; } // Handling decimal key if (e.key === ".") { res.value += "."; } } // Show equal Result function showequalresult() { result.value = eval(result.value); } // Clears the screen on click of C button. function clearScreen() { document.getElementById("result").value = ""; } // Displays entered value on screen. function liveScreen(value) { let res = document.getElementById("result"); res.value += value; }
 body { font-family: 'Open Sans', sans-serif; background-color: black; } #container { width: 1000px; height: 550px; background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)), url(bgcalc.png); margin: 20px auto; } #calculator { width: 320px; height: 520px; background-color: #eaedef; margin: 0 auto; top: 20px; position: relative; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #result { height: 120px; margin-bottom: 20px; } #history { text-align: right; height: 20px; margin: 0 20px; padding-top: 20px; font-size: 15px; color: #919191; } #result { text-align: right; height: 60px; width: 290px; margin: 10px 20px; font-size: 30px; background-color: #afbec4; } #keyboard { height: 400px; }.operator, .number, .empty { width: 67px; height: 50px; margin: 6px; float: left; border-width: 0; font-weight: bold; font-size: 15px; } #clear { background-color: #cb4e4d; border-radius: 45%; }.number, .empty { background-color: #5f7d8c; border-radius: 10px; color: white; }.number, .operator { cursor: pointer; background-color: #5f7d8c; border-radius: 10px; color: white; }.operator:active, .number:active { font-size: 13px; }.operator:focus, .number:focus, .empty:focus { outline: 0; } button:nth-child(4) { font-size: 9px; background-color: #cb4e4d; border-radius: 10px; } button:nth-child(8) { font-size: 20px; background-color: #ffa500; border-radius: 10px; } button:nth-child(12) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(16) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(20) { font-size: 20px; background-color: #fda629; border-radius: 10px; }
 <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet"> <title>A simple calculator</title> <script src="script.js"></script> </head> <body> <div id="container"> <div id="calculator"> <div id="resultss"> <div id="results"> <input type="text" name="result" class="result" id="result" value="" placeholder="0" /> </div> </div> <div id="keyboard"> <button class="operator" onclick="clearScreen()" id="clear">C</button> <button class="operator" onclick="liveScreen('+-')" id="backspace">+-</button> <button class="operator" onclick="liveScreen('%')" id="%">%</button> <button class="operator" onclick="liveScreen('/')" id="/">Console <br>Log</button> <button class="number" onclick="liveScreen(7)" id="7">7</button> <button class="number" onclick="liveScreen(8)" id="8">8</button> <button class="number" onclick="liveScreen(9)" id="9">9</button> <button class="operator" onclick="liveScreen('/')" id="/">&divide</button> <button class="number" onclick="liveScreen(4)" id="4">4</button> <button class="number" onclick="liveScreen(5)" id="5">5</button> <button class="number" onclick="liveScreen(6)" id="6">6</button> <button class="operator" onclick="liveScreen('*')" id="-">&times;</button> <button class="number" onclick="liveScreen(1)" id="1">1</button> <button class="number" onclick="liveScreen(2)" id="2">2</button> <button class="number" onclick="liveScreen(3)" id="3">3</button> <button class="operator" onclick="liveScreen('-')" id="-">-</button> <button class="empty" onclick="liveScreen(0)" id="0">0</button> <button class="number" onclick="liveScreen('.')" id="0">.</button> <button class="empty" onclick="showequalresult()" id="=">=</button> <button class="operator" onclick="liveScreen('+')" id="+">+</button> </div> </div> </div> </body> </html>

2 answers

solution1
 0  2022-03-03 10:35:09

Minimise code

One solution is to use the Array.prototype.includes() function built into JS.

Replace all of your character if checks with the following:

const validCharacters = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '+', '-', '*', '/', '.']
if (validCharacters.contains(e.key)) {
  res.value += e.key;
}

Here is a working snippet example: 

 document.addEventListener("keydown", keyboardInputHandler); function keyboardInputHandler(e) { //grabbing the liveScreen let res = document.getElementById("result"); //numbers const validCharacters = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '+', '-', '*', '/', '.'] if (validCharacters.contains(e.key)) { res.value += e.key; } } // Show equal Result function showequalresult() { result.value = eval(result.value); } // Clears the screen on click of C button. function clearScreen() { document.getElementById("result").value = ""; } // Displays entered value on screen. function liveScreen(value) { let res = document.getElementById("result"); res.value += value; }
 body { font-family: 'Open Sans', sans-serif; background-color: black; } #container { width: 1000px; height: 550px; background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)), url(bgcalc.png); margin: 20px auto; } #calculator { width: 320px; height: 520px; background-color: #eaedef; margin: 0 auto; top: 20px; position: relative; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #result { height: 120px; margin-bottom: 20px; } #history { text-align: right; height: 20px; margin: 0 20px; padding-top: 20px; font-size: 15px; color: #919191; } #result { text-align: right; height: 60px; width: 290px; margin: 10px 20px; font-size: 30px; background-color: #afbec4; } #keyboard { height: 400px; }.operator, .number, .empty { width: 67px; height: 50px; margin: 6px; float: left; border-width: 0; font-weight: bold; font-size: 15px; } #clear { background-color: #cb4e4d; border-radius: 45%; }.number, .empty { background-color: #5f7d8c; border-radius: 10px; color: white; }.number, .operator { cursor: pointer; background-color: #5f7d8c; border-radius: 10px; color: white; }.operator:active, .number:active { font-size: 13px; }.operator:focus, .number:focus, .empty:focus { outline: 0; } button:nth-child(4) { font-size: 9px; background-color: #cb4e4d; border-radius: 10px; } button:nth-child(8) { font-size: 20px; background-color: #ffa500; border-radius: 10px; } button:nth-child(12) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(16) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(20) { font-size: 20px; background-color: #fda629; border-radius: 10px; }
 <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet"> <title>A simple calculator</title> <script src="script.js"></script> </head> <body> <div id="container"> <div id="calculator"> <div id="resultss"> <div id="results"> <input type="text" name="result" class="result" id="result" value="" placeholder="0" /> </div> </div> <div id="keyboard"> <button class="operator" onclick="clearScreen()" id="clear">C</button> <button class="operator" onclick="liveScreen('+-')" id="backspace">+-</button> <button class="operator" onclick="liveScreen('%')" id="%">%</button> <button class="operator" onclick="liveScreen('/')" id="/">Console <br>Log</button> <button class="number" onclick="liveScreen(7)" id="7">7</button> <button class="number" onclick="liveScreen(8)" id="8">8</button> <button class="number" onclick="liveScreen(9)" id="9">9</button> <button class="operator" onclick="liveScreen('/')" id="/">&divide</button> <button class="number" onclick="liveScreen(4)" id="4">4</button> <button class="number" onclick="liveScreen(5)" id="5">5</button> <button class="number" onclick="liveScreen(6)" id="6">6</button> <button class="operator" onclick="liveScreen('*')" id="-">&times;</button> <button class="number" onclick="liveScreen(1)" id="1">1</button> <button class="number" onclick="liveScreen(2)" id="2">2</button> <button class="number" onclick="liveScreen(3)" id="3">3</button> <button class="operator" onclick="liveScreen('-')" id="-">-</button> <button class="empty" onclick="liveScreen(0)" id="0">0</button> <button class="number" onclick="liveScreen('.')" id="0">.</button> <button class="empty" onclick="showequalresult()" id="=">=</button> <button class="operator" onclick="liveScreen('+')" id="+">+</button> </div> </div> </div> </body> </html>

solution2
 -1  2022-03-03 10:49:35

 document.addEventListener("keydown", function(e) { e.preventDefault(); return keyboardInput(e.key); }); const allowedKeys = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '+', '-', '/', '*', ]; const screen = document.getElementById("result"); function keyboardInput(key) { if (allowedKeys.includes(key) || allowedKeys.includes(key.toString())) { screen.value += key.toString(); } if (key === '=') { showequalresult(); } return false; } // Show equal Result function showequalresult() { screen.value = eval(screen.value); } // Clears the screen on click of C button. function clearScreen() { screen.value = ""; } // Displays entered value on screen. function liveScreen(value) { keyboardInput(value); }
 body { font-family: 'Open Sans', sans-serif; background-color: black; } #container { width: 1000px; height: 550px; background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)), url(bgcalc.png); margin: 20px auto; } #calculator { width: 320px; height: 520px; background-color: #eaedef; margin: 0 auto; top: 20px; position: relative; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } #result { height: 120px; margin-bottom: 20px; } #history { text-align: right; height: 20px; margin: 0 20px; padding-top: 20px; font-size: 15px; color: #919191; } #result { text-align: right; height: 60px; width: 290px; margin: 10px 20px; font-size: 30px; background-color: #afbec4; } #keyboard { height: 400px; }.operator, .number, .empty { width: 67px; height: 50px; margin: 6px; float: left; border-width: 0; font-weight: bold; font-size: 15px; } #clear { background-color: #cb4e4d; border-radius: 45%; }.number, .empty { background-color: #5f7d8c; border-radius: 10px; color: white; }.number, .operator { cursor: pointer; background-color: #5f7d8c; border-radius: 10px; color: white; }.operator:active, .number:active { font-size: 13px; }.operator:focus, .number:focus, .empty:focus { outline: 0; } button:nth-child(4) { font-size: 9px; background-color: #cb4e4d; border-radius: 10px; } button:nth-child(8) { font-size: 20px; background-color: #ffa500; border-radius: 10px; } button:nth-child(12) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(16) { font-size: 20px; background-color: #fda629; border-radius: 10px; } button:nth-child(20) { font-size: 20px; background-color: #fda629; border-radius: 10px; }
 <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet"> <title>A simple calculator</title> <script src="script.js"></script> </head> <body> <div id="container"> <div id="calculator"> <div id="resultss"> <div id="results"> <input type="text" name="result" class="result" id="result" value="" placeholder="0" /> </div> </div> <div id="keyboard"> <button class="operator" onclick="clearScreen()" id="clear">C</button> <button class="operator" onclick="liveScreen('+-')" id="backspace">+-</button> <button class="operator" onclick="liveScreen('%')" id="%">%</button> <button class="operator" onclick="liveScreen('/')" id="/">Console <br>Log</button> <button class="number" onclick="liveScreen(7)" id="7">7</button> <button class="number" onclick="liveScreen(8)" id="8">8</button> <button class="number" onclick="liveScreen(9)" id="9">9</button> <button class="operator" onclick="liveScreen('/')" id="/">&divide</button> <button class="number" onclick="liveScreen(4)" id="4">4</button> <button class="number" onclick="liveScreen(5)" id="5">5</button> <button class="number" onclick="liveScreen(6)" id="6">6</button> <button class="operator" onclick="liveScreen('*')" id="-">&times;</button> <button class="number" onclick="liveScreen(1)" id="1">1</button> <button class="number" onclick="liveScreen(2)" id="2">2</button> <button class="number" onclick="liveScreen(3)" id="3">3</button> <button class="operator" onclick="liveScreen('-')" id="-">-</button> <button class="empty" onclick="liveScreen(0)" id="0">0</button> <button class="number" onclick="liveScreen('.')" id="0">.</button> <button class="empty" onclick="showequalresult()" id="=">=</button> <button class="operator" onclick="liveScreen('+')" id="+">+</button> </div> </div> </div> </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 calculator using javascript code Minimize javascript code Need to make Calculator using HTML/CSS and Javascript from Scratch Trying to code a calculator in JavaScript How to Minimize the Code of JavaScript In DatePicker Is this the best way to code this small calculator in Javascript using Object Oriented approach? Calculator division using javascript Backspace on calculator using JavaScript Percentage Calculator using javascript Clothing calculator using javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM