CODEWITHSUNDEEP
javascripthtml
mpden95
mpden95

Reputation: 55

Stuck trying to make a simple adder and subtractor

I'm trying to make a simple web program that just adds and subtracts inputted numbers for a bit of practice, but i'm stuck with not being able to get javascript to store the input value into their designated variables, which are val1 and val2.

Here is the html

<div class="container">
  <h1>Adder and Subtractor</h1>
  <span id="results">0</span><br>
    <input type="number" id="val1"><br>
    <input type="number" id="val2"><br>
  <button class="btn minus">-</button>
  <button class="btn plus">+</button>
  </span>
</div>

and the js

let count = 0;

let showResult = document.querySelector('#results');

let val1 = document.getElementById('val1').value;
let val2 = document.getElementById('val2').value;

const btn = document.querySelectorAll('.btn');

btn.forEach(function (btns) {
  btns.addEventListener('click', function(e){
    const styles = e.currentTarget.classList;
    if (styles.contains('minus')){
        count = val1 - val2;
        } else {
          count = val1 + val2;
        }
    showResult.textContent = count;
  })
})

Upvotes: 0

Views: 172

Answers (2)

Nitheesh
Nitheesh

Reputation: 19986

What is the issue with your code?

You defined val1 and val2 at the initial part of code which will keep the initial value of the input. Even if you update the input field value, the values kept in val1 and val2 will not be updated.

Solution

Either move the entire val1 and val2 declaration inside the click listner function OR make the val1 and val2 as the selectors for the two input fields and access its values inside the click listner. I went for the second approach here.

Also keep in mind that even if you make your input field as type="number", the value for those input fields will be rendered as string. So normal mathematical operations like addition will perform string operations such as concatenation. To avoid that use some numeric conversion ligic such as parseInt or Number functions, or simply add a + before your value to convert the string value into number.

let count = 0;

let showResult = document.querySelector('#results');

let val1 = document.getElementById('val1');
let val2 = document.getElementById('val2');

const btn = document.querySelectorAll('.btn');

btn.forEach(function (btns) {
  btns.addEventListener('click', function (e) {
    const styles = e.currentTarget.classList;
    if (styles.contains('minus')) {
      count = +val1.value - +val2.value;
    } else {
      count = +val1.value + +val2.value;
    }
    showResult.textContent = count;
  })
})
<div class="container">
  <h1>Adder and Subtractor</h1>
  <span id="results">0</span><br>
  <input type="number" id="val1"><br>
  <input type="number" id="val2"><br>
  <button class="btn minus">-</button>
  <button class="btn plus">+</button>
</div>

Upvotes: 1

DecPK
DecPK

Reputation: 25408

1) You have to get the latest value of each input after the button click. So you should get value in the click listener itself.

 btns.addEventListener( 'click', function ( e ) {
        let val1 = +document.getElementById( 'val1' ).value;
        let val2 = +document.getElementById( 'val2' ).value;
        ...
    } )

2) You should convert it to type Number before any arithmetic operation. You can also parseInt. Below are both types, where you can convert it to Number type

    let val1 = parseInt(document.getElementById( 'val1' ).value);
    let val2 = +document.getElementById( 'val2' ).value;


let count = 0;

let showResult = document.querySelector('#results');


const btn = document.querySelectorAll('.btn');

btn.forEach(function(btns) {
  btns.addEventListener('click', function(e) {
    let val1 = +document.getElementById('val1').value; // change
    let val2 = +document.getElementById('val2').value; // change
    const styles = e.currentTarget.classList;
    if (styles.contains('minus')) {
      count = val1 - val2;
    } else {
      count = val1 + val2;
    }
    showResult.textContent = count;
  })
})
<div class="container">
  <h1>Adder and Subtractor</h1>
  <span id="results">0</span><br>
  <input type="number" id="val1"><br>
  <input type="number" id="val2"><br>
  <button class="btn minus">-</button>
  <button class="btn plus">+</button>
  </span>
</div>

Upvotes: 1

Related Questions