Return result in a field

Question

Return result in a field

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

This is my first question here ... How to return this value that is in the console.log (convert) to the input with #fahrenheit, which I have already stored in a variable with the same name? Already tried:

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

But it did not work. also textContent.

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

In addition, parseFloat does not seem to work because the field rejects decimal values. Why?

Follow 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

asked by anonymous 24.05.2018 / 15:23

2 answers

1

With this is your first time, you need to put all the information, for example, <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>

24.05.2018 / 15:32

How to name variables and organize them in code in what goes beyond PEP 8? Capturing input data of type "radio" and transforming into JSON

score 0 · Accepted Answer

Complementing Virgil Novic's answer and addressing the issue of input does not accept decimals.

In the above response, just change .innerText by .value :

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

Regarding decimals, set the step attribute to input . type="number" by default only accepts whole numbers. step allows you to redefine this pattern as you see fit:

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

In the example above, the value .01 will allow 2 decimal places to jump by 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)