html - How to handle an input parameter in javascript - Stack Overflow

admin管理员组

文章数量:1415137

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

Share Improve this question Follow edited Jun 10, 2019 at 2:47 user229044♦ 240k4141 gold badges344344 silver badges347347 bronze badges asked Jun 10, 2019 at 2:27 Jin LeeJin Lee 3,5521414 gold badges5454 silver badges9292 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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>

本文标签： htmlHow to handle an input parameter in javascriptStack Overflow