使用javascript的HTML表单在IE中获得“NaN”但在Chrome中有效

Question

I am by no means a programmer but I managed to get this to work in Chrome but I get "NaN" when I try it on IE (11 if that matters). 我绝不是程序员，但是我设法让它在Chrome中运行，但是当我在IE上尝试它时，我得到“NaN”（如果这很重要，则为11）。 It basically takes 4 criteria and does some math to give a price quote.Can anyone help with this? 它基本上需要4个标准，并做一些数学来给出报价。任何人都可以帮忙吗？

<html>
<head>
<title>instant inspection quote tool</title>
<SCRIPT Language="JavaScript">

function calculateFee(frm){

   var building     = frm.building.value
   var distance     = frm.distance.value
   var age          = frm.age.value
   var sqft         = frm.sqft.value
   var total        = 0

   building = Number(building)
   distance = Number(distance)
   age      = Number(age)
   sqft     = Number(sqft)
   total    = Number(total)

   total = building + distance + age + sqft
   frm.total.value = total

}

</script>


</head>

<body>

<h1>Inspection Fee Calculator</h1>

<form method="post" action="">

Select the type of home
          <br><input type="radio" name="building" value="375"> detached
          <br><input type="radio" name="building" value="350"> semi-detached
          <br><input type="radio" name="building" value="350"> condo or freehold townhome - end unit
          <br><input type="radio" name="building" value="325"> condo or freehold townhome - interior unit
          <br><input type="radio" name="building" value="299"> condo apartment

<br><br>Is the home within 50 kms of Ottawa?   
          <br><input type="radio" name="distance" value="0"> yes
          <br><input type="radio" name="distance" value="25"> no

<br><br>Is the home less than 50 years old?    
          <br><input type="radio" name="age" value="0"> yes
          <br><input type="radio" name="age" value="25"> no

<br><br>Is the home less than 2000 square feet?    
          <br><input type="radio" name="sqft" value="0"> yes
          <br><input type="radio" name="sqft" value="25"> no
<br><br>

<input type="button" name="button" value="Calculate Fee" onClick="calculateFee(this.form)"> 

<table>
    <tr>
      <td align="right">Total Inspection fee:</td>
      <td>
        <input type="text" name="total" size="30" maxlength="30">
      </td>
    </tr>

</table>

</form>
</body>
</html>

Answer 1

Try this - note: querySelector and querySelectorAll do not work in IE < 8 and in 8 only in standards mode 试试这个 - 注意：querySelector和querySelectorAll仅在标准模式下在IE <8和8中不起作用

Live Demo 现场演示

function calculateFee(frm) {
  var total = 0,
      rads  = frm.querySelectorAll('input:checked'); // get all checked radios
  for (var i = 0; i < rads.length; i++) {
    var num = Number(rads[i].value);
    total += isNaN(num) ? 0 : num;
  }
  frm.total.value = total;
}

For individual radio values use the name - however getting the value directly it will fail if the radio is not checked 对于单个无线电值，请使用名称 - 但是如果未选中无线电，则直接获取该值将失败

var building = frm.querySelector("input[name=building]:checked");
if (building) total += Number(building.value);

To validate, hook up the form's onsubmit 要验证，请连接表单的onsubmit

function validate(frm) {
  var rads  = frm.querySelectorAll('input:checked'); // get all checked radios
  if (rads.length<4) {
    alert("Please select one of each");
    return false; // cancel form
  }
  return true;
}    
window.onload=function() {
  document.forms[0].onsubmit=function() {
    return validate(this);
  }
}

Answer 2

If none of the values are "checked" off then the values are undefined try adding this... 如果没有“检查”任何值，则值未定义尝试添加此...

function getRadioValue( radioElement ){
    for (var i=0; i < radioElement.length; i++){
       if ( radioElement[i].checked ){
          return radioElement[i].value;
       }
    }
}

Replace previous code with this... 用这个替换以前的代码......

 var building     = getRadioValue( frm.building ) || 0;
   var distance     = getRadioValue( frm.distance ) || 0;
   var age          = getRadioValue( frm.age ) || 0;
   var sqft         = getRadioValue( frm.sqft ) || 0;
   var total        = 0

Answer 3

Try this: 试试这个：

var building     = frm.querySelector("[name=building]:checked");
var distance     = frm.querySelector("[name=distance]:checked");
var age          = frm.querySelector("[name=age]:checked");
var sqft         = frm.querySelector("[name=sqft]:checked");

building = (building && building.value) || 0;
distance = (distance && distance.value) || 0;
age = (age && age.value) || 0;
sqft = (sqft && sqft.value) || 0;

使用javascript的HTML表单在IE中获得“NaN”但在Chrome中有效

问题描述

3 个解决方案

解决方案1
3 已采纳 2014-08-08 17:30:56

解决方案2
1 2014-08-08 17:20:07

解决方案3
0 2014-08-08 17:32:36

使用javascript的HTML表单在IE中获得“NaN”但在Chrome中有效

问题描述

3 个解决方案

解决方案1 3 已采纳 2014-08-08 17:30:56

解决方案2 1 2014-08-08 17:20:07

解决方案3 0 2014-08-08 17:32:36

解决方案1
3 已采纳 2014-08-08 17:30:56

解决方案2
1 2014-08-08 17:20:07

解决方案3
0 2014-08-08 17:32:36