Javascript Loan Calculator

Question

I’m trying to make a simple fixed-rate loan calculator HTML ta down there followed by script

am beginner in programming I’m having doubts on how to abstract a value from within an option/select and make it times the value times the rate and report within a div "res" in form of Innerhtml to use ${} a placeholder as response

function calcular() {
  let val = document.getElementById('txtvalor')
  let par = document.getElementById('parcela')
  let res = document.getElementById('taxa')
  let val2 = Number(val.value)
  let tax = 2.99

  if (val.value.length == 0) {
    window.alert('Digite um valor para calcular a parcela')
  } else {

  }
}

<header>
  <h1>Calculo de Empréstimo</h1>
</header>
<section>
  <div id="Calcule">
    <p>Valor R$
      <input type="number" name="valor" id="txtvalor">
    </p>
    <h5>Digite um Valor e Selecione a quantidade de prestações:</h5>

    <select type="number" name="parcela" id="parcela">
      <option value="1">2x</option>
      <option value="2">3x</option>
      <option value="3">4x</option>
      <option value="4">5x</option>
      <option value="5">6x</option>
      <option value="6">7x</option>
      <option value="7">8x</option>
      <option value="9">10x</option>
      <option value="10">11x</option>
      <option value="11">12x</option>

    </select>
    <br>
    <br>

    <input type="button" value="Calcular" id="calcemp" onclick="calcular()">

  </div>

  </div>
  <div id="taxa">
    <h4>Resultado</h4>

  </div>

Answer 1

One way to solve the problem of abstracting a select is by using the javascript gift manipulation api, the browser has several features that make it possible to do this procedure. One of the sites you can check is the w3schools.

1. In a simplified way, we take the select element with id parcela.
2. We took the value that is currently selected.
3. We took the value of the selected actuating Index.

Holding the desired value, just convert to integer and do the calculations The code snippet that does what you need is this:

const selectparcela = document.getElementById("parcela");
const i = selectparcela.selectedIndex;
const textoescolhido = selectparcela.options[i].value;

Follow your javascript function with the full code:

<script>
  function calcular() {
    const val = document.getElementById('txtvalor')
    const par = document.getElementById('parcela')
    const res = document.getElementById('taxa')
    const val2 = Number(val.value)
    const tax = 2.99
  
    if (val.value.length == 0) {
      window.alert('Digite um valor para calcular a parcela')
    } else {
      const selectparcela = document.getElementById("parcela");
      const i = selectparcela.selectedIndex;
      const textoescolhido = selectparcela.options[i].value;
      const total = val2 * tax * parseInt(textoescolhido);
      res.innerHTML = `Resultado = ${total}`;
    }
  }
</script>

Notice that in my example I changed the statements let for const, in order to maintain the code by following the conventions of good development practice.

Another adjustment I made was to change the id of this element:

<div>
   <h4 id="taxa">Resultado</h4>
</div>