Calculator using Javascript
Question
I'm trying to make a simple calculator using Vanilla Javascript. There is a div with a class of main-content, under which there is a text-box with an ID of displaytext . Further, there are 3 rows with each row containing the numbers, followed by another row which has the symbols. I've attached the code below for reference.
const displayText = document.getElementById("displaytext"); // storing the ID of the textbox in a variable const seven = document.getElementById("seven"); seven.addEventListener('click',function () { displayText.value+=seven.value; })
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } /*.main-content{ display: flex; justify-content: center; align-items: center; } */.heading{ margin: 20px; padding:15px; }.heading h2{ text-align: center; font-family: 'Open Sans', sans-serif; font-size: 45px; font-weight: 800; margin-left: -20px; }.main-content{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 75vh; background-color: rgb(255, 49, 49,0.5); width: 30%; margin: 0px 520px; border: 3px solid rgb(197, 95, 0); border-radius: 30px; }.row1,.row2,.row3,.row4{ display: flex; flex-direction: row; justify-content: center; align-items: center; /* margin: 10px; */ padding: 10px; margin-left: -70px; }.element{ padding:25px; background-color: white; text-align: center; margin: 7.5px; font-size: 25px; font-family: 'Roboto', sans-serif; border: 4px solid rgb(102, 102, 102); border-radius: 15px; cursor: pointer; width: 50%; }.symbol{ display: flex; flex-direction: column; /* align-items: flex-end; */ /* justify-content: right; */ margin-top: -355px; margin-left: 300px; }.symbol-element{ padding: 17.5px; margin: 10px 0px; border: 4px solid rgb(102, 102, 102); font-size: 25px; font-family: 'Roboto', sans-serif; border-radius: 15px; cursor: pointer; width: 120%; text-align: center; height: 66px; /* transition: 0.5s ease-in-out; */ }.displaytext{ border-radius: 10px; /* margin-left: 5px; */ height: 100px; width: 75%; padding: 20px; /* margin: 20px 0px; */ margin-left: 35px; margin-top: 20px; border: none; font-size: 17px; /* transition: 5s ease-in-out; */ }.element,.symbol-element,.displaytext:focus{ outline: none; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="/calculator/style.css"> </head> <body> <!-- main-container starts here --> <div class="main-container"> <div class="heading"> <h2>Calculator</h2> </div> <form class="main-content"> <input type="text" class="displaytext" name="displaytext" id="displaytext"> <div class="row1"> <button class="element" value="7" id="seven">7</button> <button class="element" value="8">8</button> <button class="element" value="9">9</button> </div> <div class="row2"> <button class="element" value="1">1</button> <button class="element" value="2">2</button> <button class="element" value="3">3</button> </div> <div class="row3"> <button class="element" value="4">4</button> <button class="element" value="5">5</button> <button class="element" value="6">6</button> </div> <div class="symbol"> <button class="symbol-element" value="+">+</button> <button class="symbol-element" value="-">-</button> <button class="symbol-element" value="*">*</button> <button class="symbol-element" value="/">/</button> </div> <!-- main-content ends here --> </div> <!-- outer div ends here --> <script src="/calculator/script.js"></script> </body> </html>
The thing here is that whenever I run the command displayText.value+=seven.value; , the value appears in the textbox just for a split second. How can I fix the same.
3 answers
solution1
2 2020-11-15 13:19:39
button s are form element and their default type is submit , add type="button" attribute to the buttons, so they don't send the form.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
The HTML
<button>element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons' appearance with CSS.
const displayText = document.getElementById("displaytext"); // storing the ID of the textbox in a variable const seven = document.getElementById("seven"); seven.addEventListener('click',function () { displayText.value+=seven.value; })
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; } /*.main-content{ display: flex; justify-content: center; align-items: center; } */.heading{ margin: 20px; padding:15px; }.heading h2{ text-align: center; font-family: 'Open Sans', sans-serif; font-size: 45px; font-weight: 800; margin-left: -20px; }.main-content{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 75vh; background-color: rgb(255, 49, 49,0.5); width: 30%; margin: 0px 520px; border: 3px solid rgb(197, 95, 0); border-radius: 30px; }.row1,.row2,.row3,.row4{ display: flex; flex-direction: row; justify-content: center; align-items: center; /* margin: 10px; */ padding: 10px; margin-left: -70px; }.element{ padding:25px; background-color: white; text-align: center; margin: 7.5px; font-size: 25px; font-family: 'Roboto', sans-serif; border: 4px solid rgb(102, 102, 102); border-radius: 15px; cursor: pointer; width: 50%; }.symbol{ display: flex; flex-direction: column; /* align-items: flex-end; */ /* justify-content: right; */ margin-top: -355px; margin-left: 300px; }.symbol-element{ padding: 17.5px; margin: 10px 0px; border: 4px solid rgb(102, 102, 102); font-size: 25px; font-family: 'Roboto', sans-serif; border-radius: 15px; cursor: pointer; width: 120%; text-align: center; height: 66px; /* transition: 0.5s ease-in-out; */ }.displaytext{ border-radius: 10px; /* margin-left: 5px; */ height: 100px; width: 75%; padding: 20px; /* margin: 20px 0px; */ margin-left: 35px; margin-top: 20px; border: none; font-size: 17px; /* transition: 5s ease-in-out; */ }.element,.symbol-element,.displaytext:focus{ outline: none; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="/calculator/style.css"> </head> <body> <!-- main-container starts here --> <div class="main-container"> <div class="heading"> <h2>Calculator</h2> </div> <form class="main-content"> <input type="text" class="displaytext" name="displaytext" id="displaytext"> <div class="row1"> <button class="element" value="7" id="seven" type="button">7</button> <button class="element" value="8">8</button> <button class="element" value="9">9</button> </div> <div class="row2"> <button class="element" value="1">1</button> <button class="element" value="2">2</button> <button class="element" value="3">3</button> </div> <div class="row3"> <button class="element" value="4">4</button> <button class="element" value="5">5</button> <button class="element" value="6">6</button> </div> <div class="symbol"> <button class="symbol-element" value="+">+</button> <button class="symbol-element" value="-">-</button> <button class="symbol-element" value="*">*</button> <button class="symbol-element" value="/">/</button> </div> <!-- main-content ends here --> </div> <!-- outer div ends here --> <script src="/calculator/script.js"></script> </body> </html>
You could also treat the click function on a loop and the attribute type at the same time
let displayText = document.getElementById("displaytext"); // storing the ID of the textbox in a variable let btn = document.querySelectorAll(".element, .symbol-element"); // find all our calculator buttons for (let i = 0; i < btn.length; i++) {// loop through btn found btn[i].setAttribute("type", "button"); // remove the submit behavior btn[i].addEventListener("click", function() { displayText.value += this.value; // add to display text the button value }); }
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; }.heading { margin: 20px; padding: 15px; }.heading h2 { text-align: center; font-family: 'Open Sans', sans-serif; font-size: 45px; font-weight: 800; margin-left: -20px; }.main-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 75vh; background-color: rgb(255, 49, 49, 0.5); width: 30%; margin: 0px 520px; border: 3px solid rgb(197, 95, 0); border-radius: 30px; }.row1, .row2, .row3, .row4 { display: flex; flex-direction: row; justify-content: center; align-items: center; /* margin: 10px; */ padding: 10px; margin-left: -70px; }.element { padding: 25px; background-color: white; text-align: center; margin: 7.5px; font-size: 25px; font-family: 'Roboto', sans-serif; border: 4px solid rgb(102, 102, 102); border-radius: 15px; cursor: pointer; width: 50%; }.symbol { display: flex; flex-direction: column; /* align-items: flex-end; */ /* justify-content: right; */ margin-top: -355px; margin-left: 300px; }.symbol-element { padding: 17.5px; margin: 10px 0px; border: 4px solid rgb(102, 102, 102); font-size: 25px; font-family: 'Roboto', sans-serif; border-radius: 15px; cursor: pointer; width: 120%; text-align: center; height: 66px; /* transition: 0.5s ease-in-out; */ }.displaytext { border-radius: 10px; /* margin-left: 5px; */ height: 100px; width: 75%; padding: 20px; /* margin: 20px 0px; */ margin-left: 35px; margin-top: 20px; border: none; font-size: 17px; /* transition: 5s ease-in-out; */ }.element, .symbol-element, .displaytext:focus { outline: none; }
<!-- main-container starts here --> <div class="main-container"> <div class="heading"> <h2>Calculator</h2> </div> <form class="main-content"> <input type="text" class="displaytext" name="displaytext" id="displaytext"> <div class="row1"> <button class="element" value="7">7</button> <button class="element" value="8">8</button> <button class="element" value="9">9</button> </div> <div class="row2"> <button class="element" value="1">1</button> <button class="element" value="2">2</button> <button class="element" value="3">3</button> </div> <div class="row3"> <button class="element" value="4">4</button> <button class="element" value="5">5</button> <button class="element" value="6">6</button> </div> <div class="symbol"> <button class="symbol-element" value="+">+</button> <button class="symbol-element" value="-">-</button> <button class="symbol-element" value="*">*</button> <button class="symbol-element" value="/">/</button> </div> <!-- main-content ends here --> </form> <!-- outer div ends here --> </div>
solution2
0 2020-11-15 13:30:04
don't use event listener as it is called whenever you click on that either you can mention the time for how time ur display should be represented.
solution3
0 2020-11-30 22:26:21
It looks like you trying to overwrite a const variable (display text). You can use var or let and it should work alright.
If you are interesting is building a calculator I through one together pretty quick here: https://repl.it/@bryku/calculator
It has some examples of removing non-numbers, and handling clicking buttons and typing directly in the text box. Maybe you can use it as a reference for some of the basics.
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 division using javascript
Backspace on calculator using JavaScript
Calculator function using javascript
calculator using javascript code
JavaScript: Calculator using variables
JavaScript calculator using parseFloat
Simple calculator using JavaScript
add calculator using javascript
VAT Calculator using javascript
Price Calculator using Javascript
Related Tags