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

时间:2015-07-24 19:12:34

标签: 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;
    }

3 个答案:

答案 0 :(得分: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;

答案 1 :(得分:1)

以下是我的建议

<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.onload=function() {
  document.getElementById("units").onsubmit=function() {
    alert("Włączyła się");
    var num = parseInt(document.getElementById("temp").value,10);
    if (document.getElementById("c").checked){
        alert("Celsjusz");
        document.getElementById("wynik").innerHTML=num+"C,"+(Math.round(num*9/5)+32)+"F";
    }
    else if (document.getElementById("f").checked){
        alert("Fahrenheit");
        document.getElementById("wynik").innerHTML=num+"F,"+(Math.round((num-32)*5/9))+"C";
    }
    return false;
  }
}

答案 2 :(得分:-1)

使用jquery你可以用它来说明这一行

 var x = document.Jednostki.Temperature.value;

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

你可以看到它working here 得到jquery click here