CODEWITHSUNDEEP
javascripthtmlconverters
user008273
user008273

Reputation: 41

Number Converter JQuery

I am a beginner and I have the following problem/code for the main body:

<body>
  <form action="#">
    <input type="text" id="start" /> 
    =
    <input type="text" id="finish" /> 
  </form>
  <script>
  $(function() {
    var cVal = $("#start").val();
    var fVal = $("#finish").val();
  });
  </script>
</body>

With two text boxes, I would like the value entered in the celsius text box to be converted into fahrenheit in the other text box. I have tried to use the 

keyup()

function but failed to produce the results I want. typing 15 into the celsius box should result in 59 in fahrenheit. I understand that .val() does not take any arguments, so where would I do the computation for converting the numbers? And how can I incorporate keyup?

Any help is appreciated!

Upvotes: 0

Views: 412

Answers (3)

Vincent Menzel
Vincent Menzel

Reputation: 1055

The jQuery .val() function is an overload function which means it takes 0 up to 1 argument and it's effect varies on the number of arguments passed.

As you can see in my example calling celsiusInput.val() just returns the current value of the field. However if you use it like this farenheitOutput.val(farenheit) the current value of the input is overwritten by the variable passed.

const updateFarenheit = () => {

  // find the input and output in the dom by their id
  const celsiusInput = $("#start");
  const farenheitOutput = $("#finish");

  // get the input value
  const celsius = celsiusInput.val();

  const farenheit = celsius * 9 / 5 + 32;

  // update the farenheit output
  farenheitOutput.val(farenheit);

}

// this function runs when all js is loaded aka. "document ready"
$(document).ready(function() {

  // get input field by id
  const celsiusInput = $("#start");

  // we pass the updateFarenheit function we defined before as the function which should run
  // as soon as the keyup event occures on our celsiusInput field
  celsiusInput.keyup(updateFarenheit);
});
<html lang="">

<head>
  <meta charset="utf-8">
  <title>Celsius to Farenheit</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <form action="#">
    <input type="text" id="start" /> =
    <input type="text" id="finish" />
  </form>
</body>

</html>

Upvotes: 2

Marwelln
Marwelln

Reputation: 29413

This is such a simple thing to do, jQuery is not needed at all, and because you haven't tagged jQuery here comes a plain javascript solution.

What you need to do is the add a keyup trigger on each of the input elements.

To grab our input fields we use document.getElementById(id), we use this because you've added the id attribute to your fields (it's faster than the latter method I'm mentioning). We could've used document.querySelector(selector) to get our input fields to. If you had used name="celsius" on the celsius field, we could've used document.querySelector('input[name="celsius"]') to grab that element.

What we need to do next is to an a keyup trigger to both our input fields. This is done with element.onkeyup = function() {}, in each of those functions we calculate the value for the other field.

var celsius = document.getElementById('start'),
    fahrenheit = document.getElementById('finish');
    
celsius.onkeyup = function() {
    fahrenheit.value = this.value * 9/5 + 32; 
}
    
fahrenheit.onkeyup = function() {
    celsius.value = (this.value - 32) * 5/9;
}
<form action="#">
    <input type="text" id="start" /> Celsius
    =
    <input type="text" id="finish" /> Fahrenheit
</form>

Upvotes: 2

Marko Gresak
Marko Gresak

Reputation: 8207

The val function does take arguments, you can pass it the new value and it will update textbox contents. Click the link on val, it will take you to the jQuery documentation, where all possible calls are explained. Or see the example below.

function fahrenheitToCelsius(fahrenheit) {
  var val = 0;
  // perform calculation
  return val;
}

function celsiusToFarenheit(celsius) {
  var val = 0;
  // perform calculation
  return val;
}

$(function() {
    $("#start").on('keyup', function() {
      $("#finish").val(celsiusToFarenheit($(this).val()));
    });
    $("#finish").on('keyup', function() {
      $("#start").val(fahrenheitToCelsius($(this).val()));
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
    <input type="text" id="start" /> Celsius
    =
    <input type="text" id="finish" /> Fahrenheit
  </form>

Upvotes: 2

Related Questions