javascript - Error: Cannot read property 'value' of null - Stack Overflow

admin管理员组

文章数量:1327442

I am extremely new to javascript and so I apologize in advance for any problems with the way I am asking my quesion. I am trying to post data and have a warning pop up if all fields are not filled out. And one of the fields is a radio type. Here is a link to a jsfiddle with my script /

Here is what I have at the moment

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);
    }

}

I am extremely new to javascript and so I apologize in advance for any problems with the way I am asking my quesion. I am trying to post data and have a warning pop up if all fields are not filled out. And one of the fields is a radio type. Here is a link to a jsfiddle with my script http://jsfiddle/J2yWQ/64/

Here is what I have at the moment

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);
    }

}

• javascript

Share Improve this question Follow edited Oct 24, 2012 at 12:50 Daniel A. White 191k4949 gold badges379379 silver badges465465 bronze badges asked Oct 24, 2012 at 12:47 CTVikingCTViking 9711 silver badge55 bronze badges 5

• 1 what line does the error happen? – Daniel A. White Commented Oct 24, 2012 at 12:49
• Where do you declare the logX Elements? – nja Commented Oct 24, 2012 at 12:51
• It doesn't say which line. The "catch" is catching it because I am getting the text ' An error occurred in inert: ...' – CTViking Commented Oct 24, 2012 at 12:51
• @nja - those are the IDs in spans that are hidden and bee shown (or should) when a field is left blank. – CTViking Commented Oct 24, 2012 at 12:52
• It happens here:function addProp(id) { Unhandled Error: Cannot convert 'document.getElementById(id)' to object var value = encodeURIComponent(document.getElementById(id).value); myProps.push(id + "=" + value); – nja Commented Oct 24, 2012 at 12:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

The problem is easily catched when addProp body is changed to this:

function addProp(id) {
  var el = document.getElementById(id);
  if (el) {
    myProps.push(id + "=" + encodeURIComponent(el.value));
  }
  else {
    alert('Not found: ' + id);
  }
}

Both boy_girl and email IDs are not present in this 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" />

You can fix it with something like this:

function addProp(name) {
    var els = document.getElementsByName(name);
    if (els.length) {
       myProps.push(name + "=" + encodeURIComponent(els[0].value));
    }
    else {
       alert('Not found: ' + name);
    }
}

---

But in fact, it's only the beginning of the story. myProps are local to insert function yet referenced in postData function; you show validation error signs for all the fields no matter what fields were actually filled... Besides, your code is a bit WET - for example, all these

            var log = document.getElementById("log");
            log.className = 'show';
            var log1 = document.getElementById("log1");
            log.className = 'show';
            ...

... can be easily transformed into this:

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);
}

I do understand that you're quite fresh with JS; but it's not about freshness, it's about organizing your code.

I am betting one of the addProp lines is not correct.

Debug this, see what is the last id before the error is thrown.

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

And when you do that, you will find out that the line

addProp('boy_girl');

will fail since there is no 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>

So let us change the function to check for id, and than check for the name if the id does not exist.

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

Change it so myProps is outside of the function.

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');

if you get such error:

always check all your document.getElementById if they don't return null

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

if(node){
    do something;
}

but mark that

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

or

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

if(node.value){ 
    do something;
}

can still throw the error "can't read property of null", as you don't check if node really exists

Make sure that you're designed IDs are existing on the page! For example boy_girl does not exist! Only boy_girl_band boy_girl_g The same applies for the mail. This one has the id check instead of mail.

Use Opera dragonfly or anything alike for basic troubleshooting

本文标签： javascriptError Cannot read property 39value39 of nullStack Overflow