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

标签 javascript html forms radio-button

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

最佳答案

这是我的建议

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>

关于javascript - 带有单选按钮和一个输入字段的表单。根据选择的单选按钮计算值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31618118/

相关文章:

javascript - 找不到我的 "addEventListener"函数的解决方案

ruby-on-rails-3 - Rails 3 - 如何保存(取消)选中的复选框?

C#:如何通过窗体及其控件拖动一个?

javascript - 在 preventDefault 之后提交表单

javascript - "Uncaught SyntaxError: missing ) after argument list"

javascript - 在 Grails 模板中呈现的 HTML 未附加到页面源 (DOM)

javascript - Sinonjs如何 stub 依赖注入(inject)类?

javascript - 滚动时跳过某些元素的事件类

javascript - 从不同的 javascript 文件中获取 localStorage 变量的值

javascript - 如何在编辑器中隐藏您的自定义 website.com 网站菜单