带有单选按钮和一个输入字段的表单。根据选择的单选按钮计算值

Question

我想将以摄氏度给出的温度转换为华氏度或相反。 我希望通过单选按钮形式选择单位，并使用 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;
    }

Answer 1

我看到的第一个问题： 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;

Answer 2

这是我的建议

 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>

Answer 3

使用 jquery 你可以做到这一点

 var x = document.Jednostki.Temperature.value;

到

var x = $('input[name="Temperature"]:checked').val()

你可以看到它在这里工作以获得 jquery点击这里

带有单选按钮和一个输入字段的表单。根据选择的单选按钮计算值

问题描述

3 个解决方案

解决方案1
1 2015-07-24 19:16:18

解决方案2
1 已采纳 2015-07-24 19:29:11

解决方案3
-1 2015-07-24 19:25:13

带有单选按钮和一个输入字段的表单。 根据选择的单选按钮计算值

问题描述

3 个解决方案

解决方案1 1 2015-07-24 19:16:18

解决方案2 1 已采纳 2015-07-24 19:29:11

解决方案3 -1 2015-07-24 19:25:13

带有单选按钮和一个输入字段的表单。根据选择的单选按钮计算值

解决方案1
1 2015-07-24 19:16:18

解决方案2
1 已采纳 2015-07-24 19:29:11

解决方案3
-1 2015-07-24 19:25:13