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

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;（没有 s）。

您还应该使用 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

使用 jquery 你可以替换这一行

 var x = document.Jednostki.Temperature.value;

到

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

可以看到working here 得到 jquery click here

Answer 3

这是我的建议

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>

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

Form with radio buttons and one input field. Calculate the value depending on radio button selcted

html

javascript

forms

radio-button