2

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.

Improve this question

3 Answers 3

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

2 Comments

Thank you for your contribution. Your response is more suitable for a comment rather than an answer. You can read more about answering guidelines here stackoverflow.com/help/how-to-answer
But I'm using addEventListener and it seems to be working fine. No problems at all. Could you elaborate on your statement a little more?
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.