qq_45735316
qq_45735316
采纳率100%
2020-05-21 11:28

为什么myform.js中那段document.write()存在的时候,下面的提交文件就会报错?明明把document.write()那段代码注释掉的时候还能找到对象的值

图片说明图片说明图片说明

//index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表单参数与URL参数</title>
        <script src="js/myform.js" type="text/javascript"></script>
    </head>
    <body> 
        <center>
            <caption>表单参数提交数据</caption>
            <form id="myform">
                  <table border="2" align="center" rules="all">
                    <tr>
                        <td>学号</td>
                        <td><input type="text" name="nusernum" placeholder="输入4位学号"></td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td><input type="text" name="username" placeholder="输入姓名"></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td><input type="radio" name="usersex" value="男" checked="checked">男
                        <input type="radio" name="usersex" value="女">女
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>
                            <input type="button" value="提交" onclick="submitForm()">
                            &nbsp;<input type="reset" value="重置">
                        </td>
                    </tr>
                  </table>
            </form>
            <caption>URL参数提交数据</caption>
            <table border="2" align="center" rules="all">
                    <tr>
                        <td>学号</td>
                        <td><input type="text" id="usernum" placeholder="输入学号"></td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td><input type="text" id="username" placeholder="输入姓名"></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td><input type="radio" name="usersex2" value="男" checked="checked">男
                        <input type="radio" name="usersex2" value="女">女
                        </td>
                    </tr>
                    <tr>
                        <td>文件</td>
                        <td>
                            <input type="file" id="myfile">
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>
                            <input type="button" value="提交" onclick="sendValue()">
                            &nbsp;<input type="reset" value="重置">
                        </td>
                    </tr>

                  </table>
        </center>
    </body>
</html>

//myform.js

function submitForm()
{
    var objForm=document.getElementById("myform");
    console.log(objForm);
    objForm.method="get";
    objForm.action="get.html";
    objForm.submit();//表单+提交
}
function sendValue()
{
    var sid=document.getElementById("usernum").value;
    var sname=document.getElementById("username").value;
    var ssex=document.getElementsByName("usersex2");
    var sex;
    for(var i=0;i<ssex.length;i++)
    {
        if(ssex[i].checked)
           sex=ssex[i].value;
    }
    //var URL="get.html?id="+sid+"&name="+sname+"&sex="+sex;
    //window.location.href=URL;
    //
    document.write("usernum:"+sid+"</br>");
    document.write("username:"+sname+"</br>");
    document.write("usersex:"+sex+"</br>");



    //提交文件
    var fileValue=document.getElementById("myfile").value;
    console.log(fileValue+"\n");
    var index1=fileValue.lastIndexOf(".");//点在字符串的位置
    console.log(index1);
    var fileExt=fileValue.substring(index1+1);//文件的扩展名
    var index2=fileValue.lastIndexOf("\\");   //最后一个反斜杠
    console.log(index2);
    var fileName=fileValue.substring(index2+1,index1);//文件的路径
    document.write("fileName:"+fileName+"</br>");    
    document.write("fileExt:"+fileExt+"</br>");
}

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • qq_37147630 Print_v 11月前

    解决方法:
    sendValue函数中的如下代码,移动下位置:

    document.write("usernum:"+sid+"</br>");
    document.write("username:"+sname+"</br>");
    document.write("usersex:"+sex+"</br>");

    移动至,如下代码的下面:
    ```
    //提交文件
    var fileValue=document.getElementById("myfile").value;

            document.write("usernum:"+sid+"</br>");
         document.write("username:"+sname+"</br>");
         document.write("usersex:"+sex+"</br>");
    
    ```
    

    原因:
    该报错原因是:document.getElementById("myfile") 未获取到 id为myfile 的这个元素。在页面渲染结束后(即文档加载后)使用document.write。会覆盖整个文档。所以 id为myfile 的这个元素未获取到。

    具体解决方法:
    myform.js改为如下内容

        function submitForm()
        {
                var objForm=document.getElementById("myform");
                console.log(objForm);
                objForm.method="get";
                objForm.action="get.html";
                objForm.submit();//表单+提交
        }
        function sendValue()
        {
                var sid=document.getElementById("usernum").value;
                var sname=document.getElementById("username").value;
                var ssex=document.getElementsByName("usersex2");
                var sex;
                for(var i=0;i<ssex.length;i++)
                {
                        if(ssex[i].checked)
                            sex=ssex[i].value;
                }
                //var URL="get.html?id="+sid+"&name="+sname+"&sex="+sex;
                //window.location.href=URL;
                //
    
    
    
    
                //提交文件
                var fileValue=document.getElementById("myfile").value;
                console.log(fileValue+"\n");
                var index1=fileValue.lastIndexOf(".");//点在字符串的位置
                console.log(index1);
                var fileExt=fileValue.substring(index1+1);//文件的扩展名
                var index2=fileValue.lastIndexOf("\\");   //最后一个反斜杠
                console.log(index2);
                var fileName=fileValue.substring(index2+1,index1);//文件的路径
                document.write("fileName:"+fileName+"</br>");    
                document.write("fileExt:"+fileExt+"</br>");
    
                document.write("usernum:"+sid+"</br>");
                document.write("username:"+sname+"</br>");
                document.write("usersex:"+sex+"</br>");
        }
    
    
    点赞 1 评论 复制链接分享