CODEWITHSUNDEEP
javascriptcsshtml
Yogesh Tripathi
Yogesh Tripathi

Reputation: 735

Why the value of input elements are not changing?

I'm learning Javascript and right now I'm trying to build a simple calculator.

I have added four buttons for basic arithmetic operation and three input elements.

I have attached eventListener to every button. The problem I am facing is when I input two numbers and click on any one of the four buttons I can see the result for only half second and then every input value clear away.

Here is the code.

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});
body {
  text-align: center;
}
<body>
  <h1>SIMPLE CALCULATOR</h1>
  <form>
    <label for="first">Number 1:</label>
    <input id="first" type="text" value="">
    <br><br>

    <label for="second">Number 2:</label>
    <input type="text" value="" id="second">
    <br><br>

    <label for="result">Result :</label>
    <input type="text" value="" id="result">
    <br><br>

    <button id="ADD">ADD</button>
    <button id="SUB">SUB</button>
    <button id="MUL">MUL</button>
    <button id="DIV">DIV</button>
  </form>
</body>

Upvotes: 3

Views: 98

Answers (5)

JIJOMON K.A
JIJOMON K.A

Reputation: 1280

Simply add type="button" in your button's

var res = document.getElementById('result');

document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});

document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});

document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});

document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});
body {
  text-align: center;
}
<body>
  <h1>SIMPLE CALCULATOR</h1>
  <form>
    <label for="first">Number 1:</label>
    <input id="first" type="text" value="">
    <br><br>

    <label for="second">Number 2:</label>
    <input type="text" value="" id="second">
    <br><br>

    <label for="result">Result :</label>
    <input type="text" value="" id="result">
    <br><br>

    <button type="button" id="ADD">ADD</button>
    <button type="button" id="SUB">SUB</button>
    <button type="button" id="MUL">MUL</button>
    <button type="button" id="DIV">DIV</button>
  </form>
</body>

Upvotes: 3

Akhil Aravind
Akhil Aravind

Reputation: 6130

Since your mark up are inside form element, clicking the button will submit form. either remove form or add event.preventDefault(); inside the click event;

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
  event.preventDefault();
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
  event.preventDefault();
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
  event.preventDefault();
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
  event.preventDefault();
});
body {
  text-align: center;
}
<body>
  <h1>SIMPLE CALCULATOR</h1>
  <form>
    <label for="first">Number 1:</label>
    <input id="first" type="text" value="">
    <br><br>

    <label for="second">Number 2:</label>
    <input type="text" value="" id="second">
    <br><br>

    <label for="result">Result :</label>
    <input type="text" value="" id="result">
    <br><br>

    <button id="ADD">ADD</button>
    <button id="SUB">SUB</button>
    <button id="MUL">MUL</button>
    <button id="DIV">DIV</button>
  </form>
</body>

Upvotes: 2

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

You can add to your form an action action="javascript:void(0);" 

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});
body {
  text-align: center;
}
<form action="javascript:void(0);">
  <label for="first">Number 1:</label>
  <input id="first" type="text" value="">
  <br><br>

  <label for="second">Number 2:</label>
  <input type="text" value="" id="second">
  <br><br>

  <label for="result">Result :</label>
  <input type="text" value="" id="result">
  <br><br>

  <button id="ADD">ADD</button>
  <button id="SUB">SUB</button>
  <button id="MUL">MUL</button>
  <button id="DIV">DIV</button>

</form>

I don't think in this case you even need a form tag, you can simply do it without one :

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});
body {
  text-align: center;
}
<label for="first">Number 1:</label>
<input id="first" type="text" value="">
<br><br>

<label for="second">Number 2:</label>
<input type="text" value="" id="second">
<br><br>

<label for="result">Result :</label>
<input type="text" value="" id="result">
<br><br>

<button id="ADD">ADD</button>
<button id="SUB">SUB</button>
<button id="MUL">MUL</button>
<button id="DIV">DIV</button>

Upvotes: 1

Sandip
Sandip

Reputation: 40

You need to remove "form" html tag. Form is getting submitted after you click any button, so result is wiping out.

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44105

It's because it's a form. Add an event listener to make sure the form doesn't refresh the page (default action when action is not given or invalid):

document.querySelector("form").addEventListener("submit", e => e.preventDefault());

Upvotes: 4

Related Questions