CODEWITHSUNDEEP
javascriptjqueryhtmlcss
StinkyTofu
StinkyTofu

Reputation: 223

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

Upvotes: 3

Views: 757

Answers (1)

Get Off My Lawn
Get Off My Lawn

Reputation: 36309

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>

Upvotes: 2

Related Questions