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

请参阅fiddle

我在您的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;
}

此外，我已为您的onClick()添加RadioButton属性

<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事件......例如：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如何整理这个单选按钮？

3 个答案:

请参阅fiddle