如何選擇此單選按鈕？

Question

選中后，如何獲取單選按鈕進行轉換？ 這是我編寫的HTML，但是沒有被JavaScript接受。

<form class="conversions" id="convert">

    <input type='number' placeholder='Enter the Tempeture' id='celsius' />
    </p>
    <input type='number' placeholder='Result' id='fahrenheit' disabled /></p>
    <div id="answer"></div>
    <input type="radio" value="celsius" name="cel" id="C2f" > <label for="r-    method-pickup">celsius to fahrenheit</label><br>
    <input type="radio" value="fahrenheite" name="cel" id="f2C" > <label for="r-method-pickup">fahrenheit to celsius</label><br>
    <input type='button' id='converButton' value='convert' />

JavaScript是...我意識到我丟失了代碼，但我不知道是什么原因，因為它一直使我在調用元素時出錯？

var methods = document.getElementById('convert').cel;

for (var i = 0; i < methods.length; i++){  

    if (methods[i].checked == true) {

        alert(methods[i].value); // this alert shows that it works when I have the radio button prechecked but when it is not prechecked in the html, nothing happens .

    }
}

//temperature conversion                //I need the buttons to link to the conversions below?
function celc() {
    far.value = (1.8 * cel.value) + 32;
    var answer = document.getElementById('answer');
}
function farin() {
    far.value = (cel.value - 32) / 1.8;
    var answer = document.getElementById('answer');
}

Answer 1

這是利用按鈕轉換的jsFiddle選項。

    function convert(){

    var ctof = document.getElementById("C2f");
    var ftoc = document.getElementById("f2C");
     var temperature = document.getElementById("temperature");
    var unit = document.getElementById("unit");
    var convunit = document.getElementById("convunit");
    var convertedtemperature = document.getElementById("convertedtemperature");

   if(ctof.checked)

   {
       convertedtemperature.value=(1.8*temperature.value)+32;
       unit.innerHTML="Celcius";
       convunit.innerHTML="Franheit";
   }

   else if(ftoc.checked)

   {
       convertedtemperature.value=(temperature.value-32)/1.8;
        convunit.innerHTML="Celcius";
       unit.innerHTML="Franheit";
   }

    else

   {
       alert ("Please select the conversion type");
   }

}

Answer 2

看到小提琴

我對您的javascript進行了許多更改。有關更改后的javascript，請參見下文

var radios = document.getElementsByTagName('input');
var value;
var option;

function check() {
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].type === 'radio' && radios[i].checked) {
            // get value, set checked flag or do whatever you need to
            option = radios[i].value;
        }
    }
    value = document.getElementById('degree').value;
    if (option == "celsius") {
        celc();
    } else if (option == "fahrenheite") {
        farin();
    }
}

//temperature conversion                //I need the buttons to link to the conversions below?
function celc() {
    value = (1.8 * value) + 32;
    document.getElementById('result').value = value;
}

function farin() {
    value = (value - 32) / 1.8;
    document.getElementById('result').value = value;
}

另外，我還向您的RadioButton添加了onClick()屬性，例如

<input type="radio" value="celsius" name="cel" id="C2f" onChange="check()">
<input type="radio" value="fahrenheite" name="cel" id="f2C" onChange="check()">

其中， check()是一個javascript函數。

Answer 3

您可以將click事件添加到按鈕中，例如：

 function convert() { var radioOptions = document.getElementsByName("cel"); var radioSelection; var i; for (i = 0; i < radioOptions.length; i++) { if (radioOptions[i].type === "radio" && radioOptions[i].checked === true) { radioSelection = radioOptions[i].value; } } if (radioSelection === 'celsius') { celc(); } else if (radioSelection === 'fahrenheite') { farin(); } } //temperature conversion //I need the buttons to link to the conversions below? function celc() { var origTemp = document.getElementById('temp').value; var farTemp = (1.8 * origTemp) + 32; document.getElementById('answer').innerHTML = farTemp; } function farin() { var origTemp = document.getElementById('temp').value; var celTemp = (origTemp - 32) / 1.8 document.getElementById('answer').innerHTML = celTemp; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="conversions" id="convert"> <input type='number' placeholder='Enter the Tempeture' id='temp' />---> <span id="answer"></span> <hr/> <input type="radio" value="celsius" name="cel" id="C2f"> <label for="r-method-pickup">celsius to fahrenheit</label> <br/> <input type="radio" value="fahrenheite" name="cel" id="f2C"> <label for="r-method-pickup">fahrenheit to celsius</label> <br/> <input type='button' id='converButton' value='convert' onclick="convert()" /> </form>