首页 > 解决方案 > 如何修复我的 JavaScript 摄氏转换器?

问题描述

document.getElementById("result").innerHTML =
  "The temperature in Celcius is " + convertTemp() + "!"

function getInputValue() {
  var inputNumber = document.getElementById("numberEnter")
}

function convertTemp() {
  document.getElementById("result")
  return (5 / 9) * inputNumber - 32
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <input type="text" placeholder="What is the temperature..." id="numberEnter">
  <button type="button" onclick="getInputValue();">Click to get temperature!</button>
  <p id="result"></p>
</body>

</html>

如何使温度实际出现并在我运行代码时实际出现“摄氏温度为 + convertTemp()”行。

标签: javascript

解决方案


尝试这个...

您只需向按钮添加一个 Click 事件侦听器

document.getElementById("result").innerHTML = `The temperature in Celsius is ${convertTemp(document.getElementById("numberEnter").value)} !`

function convertTemp(inputTemp) {
  return (5/9)*(inputTemp-32)
}

document.getElementById("button").addEventListener('click', function () {
  document.getElementById("result").innerHTML = `The temperature in Celsius is ${convertTemp(document.getElementById("numberEnter").value)} !`
})
Fahrenheit: <input type="text" placeholder="What is the temperature..." id="numberEnter" value=0>
<button type="button" id="button">Click to get temperature!</button>
<p id="result"></p>

和没有事件监听器的代码(我能做的最短的代码)

function convertTemp() {
  document.getElementById("result").innerHTML = `The temperature in Celsius is ${(5/9)*(document.getElementById("numberEnter").value-32)} °C!`
}
°F: <input type="text" placeholder="What is the temperature..." id="numberEnter" value=0><button type="button" id="button" onclick="convertTemp()">Click to get temperature!</button>
<p id="result"></p>

告诉我它是否适合你...


推荐阅读