[英]Form with radio buttons and one input field. Calculate the value depending on radio button selcted
我想將以攝氏度給出的溫度轉換為華氏度或相反。 我希望通過單選按鈕形式選擇單位，並使用 JS 函數計算轉換后的單位。 但是，我做錯了什么，我不確定到底是什么。 任何幫助，將不勝感激。 謝謝。
<body>
<p>Convert temperatures to and from celsius, fahrenheit.</p>
<p id="myForm>
<form name="units" onsubmit="return convertTemp();" method="post">
<input type="number" id="temp"><br>
Temperature in:
<fieldset>
<input type="radio" name="Temperature" id="c" value="c" checked><label for="c">Celsius degrees</label>
<input type="radio" name="Temperature" id="f" value="f"><label for="f">Fahrenheit degrees</label>
</fieldset>
<input type="submit" value="Oblicz">
<form>
</p>
<p id="wynik"></p>
這是我的 JavaScript 函數：
function convertTemp() {
alert("Włączyła się");
var x = document.Jednostki.Temperature.value;
if (x == "c"){
alert("Celsjusz");
}
else if (x == "f"){
alert("Fahrenheit");
}
returns false;
}
我看到的第一個問題： returns false; 應該return false; （沒有）。
您還應該使用 document.getElementById() 檢索值：
function convertTemp() {
alert("Włączyła się");
var celsius = document.getElementById('c');
var fahr = document.getElementById('f');
if (c.checked){
alert("Celsjusz");
}
else{
alert("Fahrenheit");
}
return false;
}
document.getElementById("units").onsubmit = convertTemp;
這是我的建議
window.addEventListener("load", function() { document.getElementById("units").addEventListener("submit", function(e) { e.preventDefault(); console.log("Włączyła się"); var num = parseInt(document.getElementById("temp").value, 10); if (document.getElementById("c").checked) { console.log("Celsjusz"); document.getElementById("wynik").innerHTML = num + "C," + (Math.round(num * 9 / 5) + 32) + "F"; } else if (document.getElementById("f").checked) { console.log("Fahrenheit"); document.getElementById("wynik").innerHTML = num + "F," + (Math.round((num - 32) * 5 / 9)) + "C"; } }); });
<p>Convert temperatures to and from celsius, fahrenheit.</p> <p> <form id="units"> <input type="number" id="temp"><br> Temperature in: <fieldset> <input type="radio" name="Temperature" id="c" value="c" checked><label for="c">Celsius degrees</label> <input type="radio" name="Temperature" id="f" value="f"><label for="f">Fahrenheit degrees</label> </fieldset> <input type="submit" value="Oblicz"> <form> </p> <p id="wynik"></p>
使用查詢選擇器：
window.addEventListener("load", function() { document.getElementById("units").addEventListener("submit", function(e) { e.preventDefault(); console.log("Włączyła się"); const num = parseInt(document.getElementById("temp").value, 10); const type = document.querySelector("[name=Temperature]:checked").value; if (type==="c") { console.log("Celsjusz"); document.getElementById("wynik").innerHTML = num + "C," + (Math.round(num * 9 / 5) + 32) + "F"; } else { console.log("Fahrenheit"); document.getElementById("wynik").innerHTML = num + "F," + (Math.round((num - 32) * 5 / 9)) + "C"; } }); });
<p>Convert temperatures to and from celsius, fahrenheit.</p> <p> <form id="units"> <input type="number" id="temp"><br> Temperature in: <fieldset> <input type="radio" name="Temperature" id="c" value="c" checked><label for="c">Celsius degrees</label> <input type="radio" name="Temperature" id="f" value="f"><label for="f">Fahrenheit degrees</label> </fieldset> <input type="submit" value="Oblicz"> <form> </p> <p id="wynik"></p>
根據另一個表單字段（單選按鈕）預填充一個值 HTML 表單輸入
[英]Pre-populate a value HTML form input depending on another another form field (radio buttons)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.