I wrote a code to change values in Fahrenheit to Celsius using Javascript.

<p id = "result"> </p>      // The result will appear here

<script>
function toCelsius(f) { 
    return (f-32) * 5/9;
} 
document.getElementById("result").innerHTML = toCelsius(77);
</script>

I checked this code, and it works on my Eclipse. However, instead of putting the value directly, I want to input a number in Fahrenheit and change that into Celsius.

I added the following.

<form id="frm1">
Enter a number :  <input type="text" name=fahrenheit> <br>
<input type=button" onclick="toCelsius(frm1)"  value="change">  // I need some help for handling parameter here
</form>

I want to make it as simple as possible like below.

Could anyone give me some tips on how to handle an input parameter?

I wrote a code to change values in Fahrenheit to Celsius using Javascript.

<p id = "result"> </p>      // The result will appear here

<script>
function toCelsius(f) { 
    return (f-32) * 5/9;
} 
document.getElementById("result").innerHTML = toCelsius(77);
</script>

I checked this code, and it works on my Eclipse. However, instead of putting the value directly, I want to input a number in Fahrenheit and change that into Celsius.

I added the following.

<form id="frm1">
Enter a number :  <input type="text" name=fahrenheit> <br>
<input type=button" onclick="toCelsius(frm1)"  value="change">  // I need some help for handling parameter here
</form>

I want to make it as simple as possible like below.

Could anyone give me some tips on how to handle an input parameter?

• javascript
• html

4 Answers 4

I spotted a few problems.

1. There were some syntax issues in writing HTML attributes
2. The code that changes innerHTML of result won't get invoked when the button is clicked. Rather, it'll get invoked only once, the first time the script is run. To fix this, I placed that line in a function which would be called when the button is clicked. Please look at the change button action.

<p id="result"></p>

<script>
  function toCelsius(f) {
    return (f - 32) * 5 / 9;
  }
  function changeClicked() {
    var input = document.getElementById("fahrenheit").value;
    if (parseInt(input) === null) return;
    document.getElementById("result").innerHTML = toCelsius(input);
  }
</script>

<form id="frm1">
  Enter a number : <input type="text" id="fahrenheit" name="fahrenheit"> <br>
  <input type="button" onclick="changeClicked()"  value="change">
</form>

Add an event listener for the button then call your toCelsius() function with passing the input value to it.

function toCelsius(f) {
  return (f - 32) * 5 / 9;
}
document.getElementById('btn_change').addEventListener('click', function() {
  var fahrenheit = document.getElementsByName('fahrenheit')[0].value;
  document.getElementById('result').innerHTML = toCelsius(fahrenheit);
});

<form id="frm1">
  Enter a number : <input type="text" name=fahrenheit> <br>
  <input type="button" id="btn_change" onclick="toCelsius(frm1)" value="change">
</form>
<p id="result"> </p>

// Give input tag an id of "number"
Enter a number :  <input type="text" name=fahrenheit id ="number"> <br>

// Then,

<script>

  let number = document.getElementById("number").value;
  function toCelsius(f) { 
     return (f-32) * 5/9;
  } 
 document.getElementById("result").innerHTML = toCelsius(number);
</script>

<!-- The result will be displayed here -->
<p id="result" style="min-height: 20px"></p>

<input type="number" name="fahrenheit">
<input type="button" class="convert-to-celsius-btn" value="Convert to C">

<script>
var convertBtn = document.querySelector(".convert-to-celsius-btn");
var fahrenheitInput = document.querySelector("input[name=fahrenheit]");
var resultEl = document.querySelector("#result")

function toCelsius(f) {
  return (f-32) * 5/9;
}

function convertToCelsius() {
    var fahrenheit = fahrenheitInput.value;

  // input validatation code goes here ...

  // next convert to celsius
  var celsius = toCelsius(fahrenheit)

  // now show the value in the DOM
  celsius = celsius.toFixed(2);
  resultEl.textContent = celsius + " C"
}

convertBtn.addEventListener("click", convertToCelsius);
</script>