Input validation with Return in div

Question

I would like to know how I can validate an input based on its value.

I have the following div with input and button:

    <div class="input-group form-frete">
      <input class="form-control" type="text" placeholder="00000-000"name="txtFrete" />
      <button class="btn btn-light" onclick="javascript: btn_click()">Calcular</button>
    </div>

I would like when inserting the value 35500000 in the txtFrete input and clicking on calculate, to be returned in the div just below the value: 55

<div>
O valor do frete é: "Aqui seria o 55"
</div>

I started doing a js, but I believe I’m completely wrong:

let valorFrete = "55";
let cep = txtFrete.value;

function btn_click() {
if (cep == txtFrete.value) {
console.log = ("55 reais");
} else {
console.log = ("Tente outro cpf")
}
}

Answer 1

You can make some changes to make it easier. First in HTML, adding an ID in Input and calling the function on the button:

<div class="input-group form-frete">
  <input id="txtFrete" class="form-control" type="text" placeholder="00000-000"name="txtFrete" />
  <button class="btn btn-light" onclick="btn_click();">Calcular</button>
</div>

The return div must have an ID to be accessed and receive the value, thus:

<div id="resultado">
    O valor do frete é: "Aqui seria o 55"
</div>

And the Javascript part, like this:

<script type="text/javascript">
function btn_click(){
   var vFrete = 55; // Colocando um valor fixo apenas para teste
   var vCep = document.getElementById('txtFrete').value;
   var sRet = '';

   if (vCep == '35500000') {
      sRet = 'O valor do frete é: R$ ' + vFrete;
   } else {
      sRet = 'CEP inválido.';
   }

   document.getElementById('resultado').innerHTML = sRet;
}
</script>

That way you’re taking the entered value, seeing if it’s the one you need, and returning the message to the div with the id "result".

Answer 2

To do this validation you need to fetch the input value (textFrete) and compare with the value 35500000, and pass the respective result to the div.

And that would be it:

document.getElementById("calc_frete").addEventListener("click", myFunction);

function myFunction(event) {
  const default_txtFrete = '35500000';

  var txt_cpf = 'O valor do frete é: 55 reais';
  var input_txtFrete = document.getElementById('txtFrete').value; // Busca o valor no input

  if (input_txtFrete !== default_txtFrete) txt_cpf = 'Tente outro cpf';

  document.getElementById('frete_resultado').innerHTML = txt_cpf; // Preenche
}

<form id="form_id">
  Input: <input type="text" id="txtFrete" name="txtFrete" value="" placeholder="">
</form>
<button id="calc_frete">Calcular</button>

<div id="frete_resultado">
</div>