Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Convert Celsius to Fahrenheit - How to display inside of input

I'm learning Javascript, and i'm trying to create a simple script that takes the users celsius and covert it to Fahrenheit inside of the Fahrenheit input field. I'm able to console log the results, but i can't figure out how to input the Fahrenheit inside of the input field. Codepen Here

//Capture input string from .inputbox into TestVar
function testResults (form) {
    var TestVar = form.inputbox.value,
        numString = parseFloat(TestVar),
        text = "";

  return numString * 1.8 + 32;

}
// Celsius * 1.8 + 32 = Fahrenheit
console.log(testResults);
like image 959
StinkyTofu Avatar asked Dec 19 '25 16:12

StinkyTofu


1 Answers

You can do it using HTMLInputElement.value

 // Find the button in the document
 let btn = document.querySelector('input[type=button]');
 // Add a click event listener to the button
 btn.addEventListener ('click', e => {
     // Find the fahrenheit input field
     let f = document.querySelector('#fahrenheit');
     // Find the celsisus input field
     let c = document.querySelector('#celsisus');
     // Make the calculation from the fahrenheit value.
     // Save it to the celsisus input field using `c.value`
     // where `c` is the reference to the celsisus input
     c.value = parseFloat(f.value) * 1.8 + 32;
 });
<form name="myform" action="" method="GET">
   <p>Convert Celsius to Fahrenheit </p>
   <p><input type="text" name="inputbox" value="" id="fahrenheit" placeholder="Fahrenheit"></p>
   <p><input type="text" name="fahrenheit" id="celsisus" value="" placeholder="Celsius"></p>
   <p><input type="button" NAME="button" Value="Click" ></p>
</form>
like image 187
Get Off My Lawn Avatar answered Dec 22 '25 08:12

Get Off My Lawn



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!