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;
  })
})

Answer

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>