如何处理JavaScript中的输入参数

Question

我写了一段代码，使用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>

我检查了这段代码，它可以在Eclipse上运行。 但是，我不想直接输入值，而是要以华氏温度输入数字并将其更改为摄氏温度。

我添加了以下内容。

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

我想使它尽可能简单，如下所示。

有人可以给我一些如何处理输入参数的提示吗？

Answer 1

我发现了一些问题。

1. 编写HTML属性时存在一些语法问题
2. 单击按钮后，不会调用更改结果innerHTML的代码。相反，它将在第一次运行脚本时仅被调用一次。为了解决这个问题，我将该行放置在单击按钮时会调用的函数中。请查看change按钮的操作。

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

Answer 2

为按钮添加一个事件侦听器，然后通过将输入值传递给它来调用toCelsius()函数。

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>

Answer 3

// 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>

Answer 4

<!-- 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>