HTML值作為Javascript函數的輸入，並將輸出返回給HTML

Question

我一直在嘗試創建一個函數，該函數（1）使用來自HTML的數據輸入進行計算，並且（2）將結果返回給HTML。

我在查找錯誤時遇到了一些麻煩，請您幫助我，我會很高興。

<!DOCTYPE html>
<html>
<body>

<h2>Celcius to Fahrenheit</h2>

    <input type="number" id="input-temperature"></input>
    <p id="calc-result"></p>

<script>
function toCelsius() {
    var x = document.getElementbyId("input-temperature").value;
    return (5/9) * (x-32);  
}
document.getElementById("calc-result").innerHTML = ("The result is" + toCelsius()); 

</script>

</body>
</html>

Answer 1

您拼寫了getElementbyId 。 它應該是getElementById （大寫B ）。

要計算並顯示攝氏度，您可以創建一個按鈕，然后單擊按鈕，調用“ toCelcius函數（如下所示）。

我對函數進行了以下更改：

使用if (x != "")檢查輸入的值是否為空。

 function toCelsius() { var x = document.getElementById("input-temperature").value; var Celcius = 0; if ( x != "") Celcius = (5 / 9) * (x - 32); document.getElementById("calc-result").innerHTML = ("The result is " + Celcius); }

 <input type="number" id="input-temperature"></input> <p id="calc-result"></p> <button id="btnCalculate" onclick="toCelsius()">Calculate</button>

Answer 2

您似乎犯了一些小錯誤：

使用getElementById代替getElementbyId
您需要在每次輸入字段更改時更新值：addEventListener（'keyup'，function（）{...}）
您有相反的計算：9/5 * x + 32

這是我完整的代碼：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("input-temperature").addEventListener('keyup', onInputChanged);
})

function toCelsius() {
  var x = document.getElementById("input-temperature").value;
  return 9 / 5 * x + 32;  
}

function onInputChanged() {
  document.getElementById("calc-result").innerHTML = "The result is " + toCelsius(); 
}

看到此codepen： https ://codepen.io/bertyhell/pen/WZQQgZ ? editors = 1011

HTML值作為Javascript函數的輸入，並將輸出返回給HTML

問題描述

2 個解決方案

解決方案1
0 2017-09-16 13:24:04

解決方案2
0 2017-09-16 13:28:45

HTML值作為Javascript函數的輸入，並將輸出返回給HTML

問題描述

2 個解決方案

解決方案1 0 2017-09-16 13:24:04

解決方案2 0 2017-09-16 13:28:45

解決方案1
0 2017-09-16 13:24:04

解決方案2
0 2017-09-16 13:28:45