How to take Input value and make an account

Question

Hi, I’m new to programming, and I’m learning javascript. I decided to make a tool that calculated the AMA (slaughter, death, assistance) of a game that I play. The bill is to add the slaughters with the assists and divide by the deaths. So far so good. I made a page using bootstrap, and now I want to get the value put there, to do the math, and I don’t know. I’ll put some parts of the code here.

<div class="row">
        <div class="col-md">
            <p>Digite o número de abates</p>
            <div class="input-group input-group-sm mb-3">
                <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">Abates</span>
                </div>
                <input type="number" class="form-control" id="abates" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
            </div>
        </div>

        <div class="col-md">
            <p>Digite o número de mortes</p>
            <div class="input-group input-group-sm mb-3">
                <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">Mortes</span>
                </div>
                <input type="number" class="form-control" id="mortes" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
            </div>

        </div>

        <div class="col-md">
            <p>Digite o número de assistências</p>
            <div class="input-group input-group-sm mb-3">
                <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">Assistências</span>
                </div>
                <input type="number" class="form-control" id="assistencias" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
            </div>
            <br>

            <button onclick="calcularAma()" type="button" class="btn btn-primary" id="botao-calcular">Calcular</button>
        </div>
        </div>

this is a part of html. Here is my question, how to take the value of input and calculate? Sorry, I searched, but I could not find in google. I’m totally lost.

var abates = document.getElementById('abates');
var mortes = document.getElementById('mortes');
var assistencias = document.getElementById('assistencias');

var resultado;

function calcularAma(){
document.getElementById('abates').value;
document.getElementById('mortes').value;
document.getElementById('assistencias').value;
}

(in case you need it, I’ll paste the entire code into the Pastebin. Thank you)

Answer 1

You can do so by converting only what is added to parseInt:

function calcularAma(){
   var abates = parseInt(document.getElementById('abates').value);
   var mortes = document.getElementById('mortes').value;
   var assistencias = parseInt(document.getElementById('assistencias').value);
   
   var resultado = (abates+assistencias) / mortes;

   console.log(resultado);   
}

<div class="row">
  <div class="col-md">
      <p>Digite o número de abates</p>
      <div class="input-group input-group-sm mb-3">
          <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm">Abates</span>
          </div>
          <input type="number" class="form-control" id="abates" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
      </div>
  </div>

  <div class="col-md">
      <p>Digite o número de mortes</p>
      <div class="input-group input-group-sm mb-3">
          <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm">Mortes</span>
          </div>
          <input type="number" class="form-control" id="mortes" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
      </div>

  </div>

  <div class="col-md">
      <p>Digite o número de assistências</p>
      <div class="input-group input-group-sm mb-3">
          <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm">Assistências</span>
          </div>
          <input type="number" class="form-control" id="assistencias" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
      </div>
      <br>

      <button onclick="calcularAma()" type="button" class="btn btn-primary" id="botao-calcular">Calcular</button>
  </div>
  </div>