尝试从表单中获取数据并将其追加到全局数组中,但由于某种原因未添加数据

Tried to get data from a form and append it to a global array, but for some reason the data isn't being added

提问人:Ackeem Mclennon 提问时间:11/15/2020 最后编辑:Ackeem Mclennon 更新时间:11/20/2020 访问量:139

问:

我正在尝试从表单中获取数据并将其附加到全局数组中,但由于某种原因,数据未添加到数组中。代码基本上应该接受来自表单的输入并将其存储到全局数组中。我更新了 HTML,以便您可以看到整个语法。该值基本上应该从表单中获取,并使用“addnew”函数放入全局数组中。


        function addnew()
        {
            //calculateAge();
            //Accept values entered in form
            const fname = document.getElementById('fname').value;
            const mname = document.getElementById('mname').value;
            const lname= document.getElementById('lname').value;
            const dob= document.getElementById('dob').value;
            const genderM = document.getElementsByName('male').checked;
            const genderF = document.getElementsByName('female').checked;
            const age = calculateAge.bYear;
            const bodyType = document.getElementById('Body Type').value;
            const occu= document.getElementById('occu').value;
            const height= document.getElementById('height').value;
            if (fname==null || fname=="")
            {  
                alert();  
            }
            if(mname==null || mname=="")
            {  
                alert();  
            }
            if (lname==null || lname=="")
            {  
                alert();  
            }
            if(dob==null || dob=="")
            {
                alert();
            }
            if (genderM.checked ==  false || genderF.checked == false){  
                alert();   
            }
            if (age <=18 || age >=75)
            {  
                alert();  
            }
            if(height>=170 || height<=200)
            {
                alert();
            }
            if(bodyType==null || bodyType==""){
                alert();
            }
            if(oocu==null || oocu=="")
            {
                alert();
            }
            //Append To array
            
            records.push(fname);
            records.push(mname);
            records.push(lname);
            records.push(dob);
            records.push(genderM);
            records.push(genderF);
            records.push(age);
            records.push(bodyType);
            records.push(occu);
            records.push(height);
            
            
            
            for(i=0;i<records.length;i++)
            {
            console.log(records[i]);
            }
            //showAll();
            //<h1 class="logo"><a href ="index.html"><img src="New folder/logo.jpg" /></a></h1>
            Information.addEventListener('submit', addnew);
        }
    </script>
    ```
JavaScript HTML 数组 表单 调试

评论

0赞 astigmatik 11/15/2020
你的 HTML 是什么样子的?
0赞 Mister Jojo 11/15/2020
您是否知道重复句子可能会让您的读者感到痛苦?
0赞 benc 11/15/2020
(我认为有一个编辑待定,可以删除重复的文本)。
0赞 Mister Jojo 11/15/2020
@benc(也许吧,但这并不能回答我的问题;PS:我没有投反对票)
0赞 Ackeem Mclennon 11/16/2020
对不起,这是一个错误

答:

0赞 yochanan sheinberger 11/15/2020 #1

首先。 属性与元素无关。nameform

第二。 没有意义,因为没有定义。Information.addEventListener('submit', addnew);Information

并深入核心。在订阅窗体时,页面默认刷新,因此 addNew 函数会像所有其他变量一样中止。为了防止它,您必须执行以下操作。

在提交按钮广告 ID 属性时:

<button id="submit" type="submit"> Submit </button>

然后在 JS 之上,获取 button 元素并向其添加事件侦听器:

let submit = document.getElementById('submit');
submit.addEventListener('click', addnew );

这是最后一步。在 addNew 函数上,添加一个事件参数。在函数代码的开头,触发 preventDefault 方法:

function addnew(event) {
  event.preventDefault();
  // the rest of the code here
}

顺便一提。你这里有一个错别字。它应该是.occu

if (oocu == null || oocu == "") {
  alert();
}

祝你好运!

评论

0赞 Ackeem Mclennon 11/16/2020
在代码之外删除 addEvent 侦听器不起作用。我更新了帖子以显示整个语法。
0赞 Ackeem Mclennon 11/16/2020
试过了,仍然有同样的问题
0赞 yochanan sheinberger 11/16/2020
你在控制台上得到了什么吗?
0赞 Ackeem Mclennon 11/16/2020
不,什么都没有。 必须添加此语句,因为无法读取 AddEventListenervar submit = document.getElementById('submit'); if(submit){ submit.addEventListener('click', addnew, false); }
0赞 yochanan sheinberger 11/16/2020
您是否将值为“submit”的 id 属性添加到相关按钮?