Return result in a field

Asked

Viewed 497 times

1

This is my first question here... How to return this value that is in the console.log(converts) to the input with #Fahrenheit, which I have already saved in a variable with the same name? I’ve tried:

document.querySelector('#fahrenheit').innerText = converte

But it didn’t work. textContent also did not.

document.querySelector('#temp-form').addEventListener('submit', calcular);

//função calculadora

function calcular(e){
// pegar o valor em Celsius
const celsius = document.querySelector('#celsius');


// calculos
const principal = parseFloat(celsius.value);
const converte = parseFloat((9 * principal + 160) / 5);


console.log(converte);



 e.preventDefault();
}

Also parseFloat does not seem to work as the field rejects decimal values. Because?

Follows the HTML: 

<!doctype html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<title>Conversor de Temperatura</title>
</head>
<body class="bg-info">
  <div class="container mt-5">
      <div class="row">
          <div class="col-md-6 mx-auto">
              <div class="card card-body text-center mt-5">

                  <h1 class="heading display-5 pb-3">Conversor de Temperatura</h1>
                  <form id="temp-form">
                      <div class="form-group">
                          <div class="input-group">
                              <span class="input-group-text">ºC</span>
                              <input type="number" class="form-control" id="celsius" placeholder="Temperatura em Celsius">
                          </div>
                      </div>

                        <div class="form-group">
                            <input type="submit" value="Calcular" class="btn btn-danger btn-block">
                        </div>
                  </form>

                  <!-- RESULTS -->
                  <div id="results" class="pt-4"><h5>Resultados</h5></div>
                  <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-text">Fahrenheit</span>
                            <input type="number" class="form-control" id="fahrenheit" disabled>
                        </div>
                  </div>

              </div>

          </div>
      </div>
  </div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>
javascript

  • place document.querySelector('#fahrenheit').innerText = converte in place console.log(converte)!

  • some remarks: how did you not put the html, can’t tell which element is the "Fahrenheit". To use the property innerText, must be an element of the p, div, label,, etc. If it is a input, use value (document.querySelector('#fahrenheit').value = converte). If you fetch the element per id, you can use something more specific like document.getElementById("fahrenheit") for example. We usually use const for primitive types, such as a number or text (for example const PI = 3.1416), not for elements (const celsius = document.querySelector('#celsius')).

2 answers

1

With this is your first time, you need to put all the information, for example, the <form>, but I ended up creating a minimal example:

document.querySelector('#temp-form')
        .addEventListener('submit', calcular);


function calcular(e) 
{
  var celsius = document.getElementById('celsius');
  var principal = parseFloat(celsius.value);
  var converte = parseFloat((9 * principal + 160) / 5);
  document.getElementById('fahrenheit').innerText = converte
  e.preventDefault();
}
<form id="temp-form" name="temp-form">
 <input type="text" id="celsius" name="celsius" />
 <button>Calcular</button>
</form>

<label id="fahrenheit"></label>

  • It may be that the code in the question did not work because "Fahrenheit" may be a field input, hence innerText won’t work

  • @Ricardopunctual truth, I just made an example more or less as he had written in the question...!

0


Complementing Virgil Novic’s response and addressing the question of input not accept decimals.

In the above-mentioned answer, simply change the .innerText for .value:

document.getElementById('fahrenheit').value = converte;

To the decimal place the attribute step in the input. The type="number" by default only accepts whole numbers. The step allows you to reset this pattern the way you think best:

<input type="number" step=".01"...

In the example above, the value .01 will allow 2 decimal places jumping from 1 in 1 hundredth.

Other basic examples:

step=".00"   -> 2 casas decimais pulando de 1 em 1 inteiro
step=".001"  -> 3 casas decimais pulando de 1 em 1 milésimo
step=".1"    -> 1 casa decimal pulando de 1 em 1 décimo
step=".10"   -> 2 casas decimais pulando de 1 em 1 décimo
step="any"   -> aceita qualquer valor float (sem número definido de casas decimais)

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.