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

Question

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.net/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);
    }

}

score 2 · Accepted Answer

addPropボディを次のように変更すると、問題を簡単に見つけることができます。

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

このHTMLにはboy_girlとIDの両方が含まれていません。email

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" />

次のような方法で修正できます。

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

しかし実際には、それは物語の始まりにすぎません。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);
}

私はあなたがJSに非常に新鮮であることを理解しています。しかし、それは鮮度ではなく、コードを整理することです。

score 1 · Accepted Answer

このようなエラーが発生した場合：

nullが返されない場合は、常にすべてのdocument.getElementByIdを確認してください

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

ノードが実際に存在するかどうかを確認しないため、「nullのプロパティを読み取れません」というエラーがスローされる可能性があります

score 1 · Accepted Answer

addProp 行の 1 つが正しくないに違いありません。

これをデバッグして、エラーがスローされる前の最後の 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>

そのため、id をチェックするように関数を変更し、id が存在しない場合は名前をチェックします。

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

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

score 0 · Accepted Answer

設計された ID がページに存在することを確認してください。たとえば、boy_girl存在しません！メールboy_girl_bもboy_girl_g 同様です。checkこれにはメールの代わりにIDがあります。

基本的なトラブルシューティングには、Opera トンボなどを使用してください

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

4 に答える 4

Related

Reference