Question

我有一个表单来计算表单中的总值，但即使html输入的值是数字，它也会导致nan错误。我做错了什么？

＆＃13;

function myFunction() {
  var y = document.getElementsByName("optradio").value;
  var z = document.getElementsByName("extra-hours").value;
  var x = +y + +z;
  document.getElementById("result").innerHTML = x;
}

＆＃13;

<label class="radio-inline">
  <input type="radio" name="optradio" value="25">Half day (3hrs)
</label>
<label class="radio-inline">
  <input type="radio" name="optradio" value="50">Full day (6hrs)
</label>
<input type="number" value="" min="0" max="6" class="form-control" name="extra-hours">
<button type="button" onclick="myFunction()">Try it</button>
<p id="result"></p>

＆＃13;

Answer 1

您必须循环通过无线电以获取值。 getElement s ByName返回多个元素。

＆＃13;

<label class="radio-inline">
  <input type="radio" name="optradio" value="25">Half day (3hrs)
</label>
<label class="radio-inline">
  <input type="radio" name="optradio" value="50">Full day (6hrs)</label>

<input type="number" value="" min="0" max="6" class="form-control" name="extra-hours">

<button type="button" onclick="myFunction()">Try it</button>

<p id="result"></p>

<script>
  function valueOfRadio(name) {

    // Get all of the radios by name
    var radios = document.getElementsByName(name); 

     // Go through each one
    for (var i = 0, length = radios.length; i < length; i++) {
      // If it's checked, lets return it's value
      if (radios[i].checked) {
        return radios[i].value;
      }
    }  
    
  }
  
  function myFunction() {
    // Go get the right radio value
    var y = valueOfRadio('optradio');
    // Same problem here. Multiple returned, but we know we only have one element so we index to 0. 
    //You could alternatively use getElementsById for this which will return a single node.
    var z = document.getElementsByName("extra-hours")[0].value;
    var x = +y + +z;
    document.getElementById("result").innerHTML = x;
  }
</script>

＆＃13;

Answer 2

getElementsByName返回一个数组，您必须测试所有无线电以查看它们是否被检查。

试一试：

    <label class="radio-inline">
      <input type="radio" name="optradio" value="25">Half day (3hrs)
    </label><label class="radio-inline"><input type="radio" name="optradio" value="50">Full day (6hrs)</label>

    <input type="number" value="" min="0" max="6" class="form-control" id="extra-hours">

    <button type="button" onclick="myFunction()">Try it</button>

<p id="result"></p>

<script>
function myFunction() {
    var radios = document.getElementsByName("optradio");

    var y = 0;

    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {

            y += +radios[i].value;


        }
    }
        var z = document.getElementById("extra-hours").value;
        var x =  +y + +z;
    document.getElementById("result").innerHTML = x;
}
</script>

Answer 3

实际上getElementsByName返回给定名称的元素数组，名称optradio分配给2个单选按钮，所以你需要这样做

＆＃13;

function myFunction() {
  var radioarray = document.getElementsByName("optradio");
  var y;
  for (var i = 0; i < radioarray.length; i++) {
    if (radioarray[i].checked) {
      y = radioarray[i].value;
    }
  }

  var z = document.getElementsByName("extra-hours")[0].value;
  var x = +y + +z;
  document.getElementById("result").innerHTML = x;
}

＆＃13;

<label class="radio-inline">
  <input type="radio" name="optradio" value="25">Half day (3hrs)
</label>
<label class="radio-inline">
  <input type="radio" name="optradio" value="50">Full day (6hrs)
</label>
<input type="number" value="" min="0" max="6" class="form-control" name="extra-hours">
<button type="button" onclick="myFunction()">Try it</button>
<p id="result"></p>

＆＃13;

Answer 4

这是一个使用选择而不是单选按钮的示例，它看起来更紧凑和干净。我还使用了jquery而不是普通的Javascript，因为代码更清晰。

＆＃13;

function myFunction() {
  var result =  parseInt($("[name=optradio]").val()) + parseInt($("[name=extra-hours]").val());
  $("#result").text(result);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="optradio">
  <option value="25">Half day (3hrs)
  <option value="50">Full day (6hrs)
</select>
<input type="number" value="0" min="0" max="6" class="form-control" name="extra-hours">
<button type="button" onclick="myFunction()">Try it</button>

<p id="result"></p>

＆＃13;

Answer 5

document.getElementsByName("...")

返回节点列表，而不是单个节点。您应该使用id来仅选择单个节点（首选）。那是

var y = document.getElementById("optradio").value
var z = document.getElementById("extra-hours").value

属性＆＃34; name＆＃34;和＆＃34; id＆＃34;有不同的含义，所以一定要使用你实际意思的那个。

如果您想要一个唯一标识符，请使用＆＃34; id＆＃34;，如果您想要对您选择的DOM元素进行分组，请使用＆＃34; name＆＃34;。

此外，单选按钮的值始终相同，您需要根据所选的＆＃39;有条件地应用它。属性。

＆＃13;

function myFunction() {
  var half = document.getElementById("half");
  var full = document.getElementById("full");
  var y = half.checked ? half.value : full.value;
  var z = document.getElementById("extra-hours").value;
  var x = +y + +z;
  document.getElementById("result").innerHTML = x;
}

＆＃13;

<label class="radio-inline">
  <input type="radio" name="optradio" id="half" value="25" checked>Half day (3hrs)
  <input type="radio" name="optradio" id="full" value="50">Full day (6hrs)
</label>
<input type="number" value="" min="0" max="6" class="form-control" id="extra-hours">
<button type="button" onclick="myFunction()">Try it</button>
<p id="result"></p>

＆＃13;

最后，虽然我不打算展示它，但你现在最好学习jQuery了。其他一切都使用jQuery。每个人都使用jQuery，因为它比基本的javascript更好。正如Christian Juth在答案中所表明的那样，你可能也想把它变成一个选择框。

Javascript计算导致NaN

5 个答案: