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

【问题标题】：Form with radio buttons and one input field. Calculate the value depending on radio button selcted带有单选按钮和一个输入字段的表单。根据选择的单选按钮计算值
【发布时间】：2015-10-15 13:46:50
【问题描述】：

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

【问题讨论】：

关闭您的表单 ID。 id="myForm">
我在您的 HTML 代码中看不到 Jednostki，您在第 3 行的 JS 代码中声明了该代码；
感谢您的接受。我已将其更新为更合适的事件监听器用法

标签： javascript html forms radio-button

【解决方案1】：

这是我的建议

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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用 jquery 你可以做到这一点 raplce 这一行

 var x = document.Jednostki.Temperature.value;

到

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

你可以看到它working here 获取 jquery click here

【讨论】：