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>How do I make it so that the temperature actually appears and have the "The temperature in Celcius is + convertTemp()" line actually appear when I run the code.
Try this...
You have to just add a Click Event listener to the button
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>And code without Event Listener (The shortest possible code i can make)
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>And tell me if its ok for you...
getInputValue() should call convertTemp(), and then assign the result to innerHTML.
You need to use .value to get the input value.
In the formula, you have to put parentheses around inputNumber - 32 to override the default operator precedence.
function getInputValue() {
var inputNumber = parseFloat(document.getElementById("numberEnter").value);
document.getElementById("result").innerHTML =
"The temperature in Celcius is " + convertTemp(inputNumber) + "!"
}
function convertTemp(inputNumber) {
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>Solution without event listener:
<!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>
<script>
function getInputValue(){
var inputNumber = document.getElementById("numberEnter").value;
document.getElementById("result").innerHTML = "The temperature in Celcius is " + convertTemp(inputNumber) + "!"
}
function convertTemp(f){
document.getElementById ("result")
return (5/9) * (f - 32)
}
</script>
</body>
</html>
Example: https://tortoiseshell-silken-stranger.glitch.me/f2c.html