Document.getelementByID未定义错误

时间:2015-10-02 07:15:54

标签: javascript html

不确定我为什么会这样。可能在代码中使用此关键字存在一些问题。当我只提醒一个输入文本时它会显示输出

  

TypeError:文档未定义newhtml.html:30:16

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        function calcAvg(val)
        {

            var x=document.getElementById(val.id).value 
            var form=val.form;
            var form_name=form.name;
            var document=form_name.document;
            var value=val.value;
            var name=val.name;
            alert(form.name +' '+document );
            var valueOne    = document.getElementById("txt1").value;
            var valueTwo    = document.getElementById('txt2').value;
            var valueThree  = document.getElementById('txt3').value;
            var valueFour   = document.getElementById('txt4').value;
            var valueFive   = document.getElementById('txt5').value;
                        performCalc(valueOne, valueTwo, valueThree, valueFour, valueFive);
        }

        function performCalc(valueOne, valueTwo, valueThree, valueFour, valueFive) 
        {
            var calcResult = parseInt(valueOne) + parseInt(valueTwo) + parseInt(valueThree) + parseInt(valueFour) + parseInt(valueFive);
            var averageResult = calcResult / 5;
            return averageResult;
        }
    </script>
    </head>
    <body>
        <input type='text' id='txt1' name='txt1' value=0 onchange='calcAvg(this)'/>
        <input type='text' id='txt2' name='txt2' value=0 onchange='calcAvg(this)'/>
    <input type='text' id='txt3' name='txt3' value=0 onchange='calcAvg(this)'/>
    <input type='text' id='txt4' name='txt4' value=0 onchange='calcAvg(this)'/>
    <input type='text' id='txt5' name='txt5' value=0 onchange='calcAvg(this)'/>
    <input type='text' id='averageResult' name='averageResult' value='0' />
    </body>
</html>

2 个答案:

答案 0 :(得分:0)

这条线毫无意义:

var document=form_name.document;

删除它。

在该函数的开头还有一堆其他行似乎没有用处,也会导致错误。

您也没有使用 performCalc函数的返回值。

这是删除了这些内容并将performCalc的结果分配给averageResult元素的版本:

&#13;
&#13;
function calcAvg(val) {

  var valueOne = document.getElementById("txt1").value;
  var valueTwo = document.getElementById('txt2').value;
  var valueThree = document.getElementById('txt3').value;
  var valueFour = document.getElementById('txt4').value;
  var valueFive = document.getElementById('txt5').value;
  document.getElementById("averageResult").value = performCalc(valueOne, valueTwo, valueThree, valueFour, valueFive);
}

function performCalc(valueOne, valueTwo, valueThree, valueFour, valueFive) {
  var calcResult = parseInt(valueOne) + parseInt(valueTwo) + parseInt(valueThree) + parseInt(valueFour) + parseInt(valueFive);
  var averageResult = calcResult / 5;
  return averageResult;
}
&#13;
<input type='text' id='txt1' name='txt1' value=0 onchange='calcAvg(this)' />
<input type='text' id='txt2' name='txt2' value=0 onchange='calcAvg(this)' />
<input type='text' id='txt3' name='txt3' value=0 onchange='calcAvg(this)' />
<input type='text' id='txt4' name='txt4' value=0 onchange='calcAvg(this)' />
<input type='text' id='txt5' name='txt5' value=0 onchange='calcAvg(this)' />
<input type='text' id='averageResult' name='averageResult' value='0' />
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您必须使用this.id获取每个输入的获取ID 例如:
   

并从功能和val

清除val.id
function calcAvg(val)
        {

            var x=document.getElementById(val.id).value 
            var form=val.form;
            var form_name=form.name;
            var document=form_name.document;
            var value=val.value;
            var name=val.name;
            alert(form.name +' '+document );
            var valueOne    = document.getElementById("txt1").value;
            var valueTwo    = document.getElementById('txt2').value;
            var valueThree  = document.getElementById('txt3').value;
            var valueFour   = document.getElementById('txt4').value;
            var valueFive   = document.getElementById('txt5').value;
                        performCalc(valueOne, valueTwo, valueThree, valueFour, valueFive);
        }