Javascript 错误：无法读取属性'；价值'；空的_Javascript

Javascript 错误：无法读取属性'；价值'；空的

javascript

Javascript 错误：无法读取属性'；价值'；空的,javascript,Javascript,我对javascript非常陌生，因此对于我询问问题的方式出现的任何问题，我提前表示歉意。我试图发布数据，如果所有字段都没有填写，会弹出一个警告。其中一个字段是无线电类型。下面是一个带有我的脚本的JSFIDLE链接这是我目前的情况 function emailWarning() { var check = document.getElementById("check"); check.className = 'show'; } function validateEmail(x

我对javascript非常陌生，因此对于我询问问题的方式出现的任何问题，我提前表示歉意。我试图发布数据，如果所有字段都没有填写，会弹出一个警告。其中一个字段是无线电类型。下面是一个带有我的脚本的JSFIDLE链接

这是我目前的情况

function emailWarning() {
    var check = document.getElementById("check");
    check.className = 'show';
}

function validateEmail(xem) {
    var re = /\S+@\S+\.\S+/;
    return re.test(xem);
}

function postData() {
        email = 'email'+document.getElementById('email').value;
    var tt = validateEmail(email);
    if (tt == true) {
        xmlhttp.open('POST', 'payment.php', true);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(myProps.join("&"));
    } else {
        emailWarning();
    }
}

function insert() {
    try {
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }


    var myProps = [];

    function addProp(id) {
            var value = encodeURIComponent(document.getElementById(id).value);
            myProps.push(id + "=" + value);
    }

    addProp('child_name');
    addProp('age');
    addProp('hometown');
    addProp('boy_girl');
        addProp('first_name');
    addProp('last_name');
    addProp('email');
    addProp('address1');
    addProp('address2');
    addProp('city');
    addProp('state');
    addProp('zip');
    addProp('country');

    var flagInvalid = false;
    var tempArray = document.getElementsByClassName("required");
    for (var i = 0; i < tempArray.length; i++) {
        if (tempArray[i].value == "") {
            flagInvalid = true;
            break;
        }
    }

    if (flagInvalid == false) {
        postData();

    } else {

        var log = document.getElementById("log");
        log.className = 'show';
        var log1 = document.getElementById("log1");
        log1.className = 'show';
        var log2 = document.getElementById("log2");
        log2.className = 'show';
        var log3 = document.getElementById("log3");
        log3.className = 'show';
        var log4 = document.getElementById("log4");
        log4.className = 'show';
        var log5 = document.getElementById("log5");
        log5.className = 'show';
        var log6 = document.getElementById("log6");
        log6.className = 'show';
        var log7 = document.getElementById("log7");
        log7.className = 'show';
        var log8 = document.getElementById("log8");
        log8.className = 'show';
        var log9 = document.getElementById("log9");
        log9.className = 'show';
        var log0 = document.getElementById("log0");
        log0.className = 'show';
        var logA = document.getElementById("logA");
        logA.className = 'show';
            }   

    } catch (e) {
        alert('An error occured in inert: ' + e);
    }

}

函数emailWarning（）{
var check=document.getElementById（“check”）；
check.className='show'；
}
函数validateEmail（xem）{
var re=/\S+@\S+\.\S+/；
返回再测试（xem）；
}
函数postData（）{
email='email'+document.getElementById（'email'）.value；
var tt=验证电子邮件（电子邮件）；
如果（tt==true）{
open（'POST'，'payment.php'，true）；
setRequestHeader（'Content-type'，'application/x-www-form-urlencoded'）；
xmlhttp.send（myProps.join（“&”）；
}否则{
电子邮件警告（）；
}
}
函数插入（）{
试一试{
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}否则{
xmlhttp=newActiveXObject（'Microsoft.xmlhttp'）；
}
var myProps=[]；
函数addProp（id）{
var value=encodeURIComponent（document.getElementById（id）.value）；
myProps.push（id+“=”+值）；
}
addProp（“孩子的名字”）；
addProp（“年龄”）；
addProp（“家乡”）；
addProp（“男孩女孩”）；
addProp（“名字”）；
addProp（“姓氏”）；
addProp（“电子邮件”）；
addProp（“地址1”）；
addProp（“地址2”）；
addProp（“城市”）；
addProp（“州”）；
addProp（'zip'）；
addProp（“国家”）；
var flagInvalid=false；
var tempArray=document.getElementsByClassName（“必需”）；
对于（var i=0；i

我打赌其中一条addProp行是不正确的

如果要对此进行调试，请查看引发错误之前的最后一个id是什么

function addProp(id) {
        console.log(id);
        var value = encodeURIComponent(document.getElementById(id).value);
        myProps.push(id + "=" + value);
}

当你这么做的时候，你会发现

addProp('boy_girl');

将失败，因为没有id

        <span id="log4" class="hidden" style="color:red"><b>*</b></span>
        Boy: <input type="radio" name="boy_girl" id="boy_girl_b" value="boy"/>
        Girl:<input type="radio" name="boy_girl" id="boy_girl_g" value="girl"/></li>

将其更改为myProps不在函数范围内

var myProps = [];  //<--- Added this line
function insert() {
        try {
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
            }


            myProps = [];  //<---- Changed this line

            function addProp(id) {
                var input = document.getElementById(id);
                if(!input) {
                   input = document.forms[0][id];   
                }
                console.log(input);
                var value = encodeURIComponent(input.value);
                myProps.push(id + "=" + value);
            }

            addProp('child_name');

var myProps=[]// 当addProp
正文更改为以下内容时，很容易发现问题：
function addProp(id) {
  var el = document.getElementById(id);
  if (el) {
    myProps.push(id + "=" + encodeURIComponent(el.value));
  }
  else {
    alert('Not found: ' + id);
  }
}

boy\u girl
和email
ID在此HTML中不存在：
Boy: <input type="radio" name="boy_girl" id="boy_girl_b" value="boy"/>
Girl:<input type="radio" name="boy_girl" id="boy_girl_g" value="girl"/></li>
...
<input type="text" name="email" id="check" maxlength="64" class="required" />


但事实上，这只是故事的开始myProps
是insert
函数的本地属性，但在postData
函数中引用；无论实际填写的字段是什么，都会显示所有字段的验证错误符号。。。此外，您的代码有点湿-例如，所有这些
            var log = document.getElementById("log");
            log.className = 'show';
            var log1 = document.getElementById("log1");
            log.className = 'show';
            ...

。。。可以很容易地转化为：
var showValidationError = function(id) {
    var el = document.getElementById(id);
    if (el) { 
        el.className = 'show'; 
    } 
    else { 
        alert('Missing element #' + id);
    }
}
...
showValidationError('log');
for (var i = 1; i < 10; i++) {
  showValidationError('log' + i);
}

var showValidationError=函数（id）{
var el=document.getElementById（id）；
如果（el）{
el.className='show'；
} 
否则{
警报（‘缺少元素#’+id）；
}
}
...
showValidationError（“日志”）；
对于（变量i=1；i<10；i++）{
showValidationError（'log'+i）；
}

我知道你对JS很新鲜；但这不是关于新鲜度，而是关于组织代码。确保页面上存在您设计的ID！
例如，boy\u girl
不存在！只有男孩女孩b
和男孩女孩g
这同样适用于邮件。这一个的id是check，而不是mail
如果出现以下错误，请使用Opera dragonfly或类似工具进行基本故障排除：
如果document.getElementById不返回null，请始终检查它们
var node = document.getElementById('someid');

if(node){
    do something;
}

但请记住这一点
var node = document.getElementById('someid').value;

或
仍然可以抛出错误“can not read property of null”，因为您没有检查节点是否确实存在错误发生在哪一行？在哪里声明logX元素？它没有说明哪一行。“catch”正在捕获它，因为我正在获取文本“惰性中发生错误：…”@nja-这些是跨距中的id，在字段留空时隐藏并显示（或应该显示）。它发生在以下位置：函数addProp（id）{未处理的错误：无法转换'文档。getElementById（id）'to object var value=encodeURIComponent（document.getElementById（id.value）；myProps.push（id+“=”+value）；我输入了该代码，但我得到了相同的错误。我想错误在于男孩女孩行，因为那是收音机按钮。那么我如何调整addProps以发布收音机输入？我更接近了！警告有效，但提交后我现在得到错误参考错误：myProps未定义。我只是告诉你如何修复。我添加编辑一行，更改另一行，查找箭头。另外，在post函数中，您还有一个按id引用电子邮件的错误。我已经修复了电子邮件id
var node = document.getElementById('someid');

if(node){
    do something;
}

var node = document.getElementById('someid').value;

var node = document.getElementById('someid');

if(node.value){ 
    do something;
}