1

チェックボックスをオンにした結果をローカルストレージに保存しようとしていますが、保存しようとすると上記のエラーが発生します。

コードにプロパティが表示されているため、何が未定義なのかよくわかりません。コードは次のとおりです。

var getCheckboxValue = function (){
    var checkboxes = document.forms[0].features;
    for(var i=0, j=checkboxes.length; i<j; i++){
        if(checkboxes[i].checked){
        console.log(checkboxes[i].value);
            //featuresValue = $("features").value();
        }else{
            checkboxes = "No"
        }
        }
    }

var storeData = function (){
    var id = Math.floor(Math.random()*10000001);
    //getSelectedRadio();
    getCheckboxValue();
    var item = {};
        item.brand = ["Brand",$("brand").value];
        item.model = ["Model",$("model").value];
        item.comments = ["comments",$("comments").value];
        //item.acoustic = ["acoustic", acousticValue]; 
        item.features = ["features",checkboxes];

    //Save data into local storage: Use Stringify to convert our object to a string
    localStorage.setItem(id,JSON.stringify(item));
    alert("Contact Saved!");
}


//set link & submit click events
var save = $("button");
save.addEventListener("click", storeData);

関連するhtmlは次のとおりです。

<li>Features:
                    <ul>
                        <li><input type="checkbox"  name="features" value = "Cutaway" id="cutaway" /><label for="cutaway">Cutaway</label></li>
                        <li><input type="checkbox"  name="features" value = "Finished" id="finished" /><label for="finished">Finished</label></li>
                        <li><input type="checkbox"  name="features" value = "Inlay" id="inlay" /><label for="inlay">Inlay</label></li>
                        <li><input type="checkbox"  name="features" value = "Wide Neck" id="wneck" /><label for="wneck">Wide Neck</label></li>
                        <li><input type="checkbox"  name="features" value = "Left-handed" id="lhanded" /><label for="lhanded">Left-handed</label></li>
                    </ul>
                </li>

または、github の完全なコードへのリンクを次に示します。

https://github.com/b80266/VFW-Project-2/blob/master/additem.html

https://github.com/b80266/VFW-Project-2/blob/master/main.js

4

2 に答える 2

6

checkboxes問題は、 (フォーム内のチェックボックスの元のコレクション) の値をここで上書きしていることです:

}else{
    checkboxes = "No"
}

これはループの内側checkboxesです... を反復しているループです。最初に取得した要素のコレクションではなく、文字列「いいえ」の文字を反復処理しています。この文字列の長さはわずか 2 文字ですが、元のループにはキャッシュされたcheckboxes.length(5 つの要素) の値が格納されjており、反復ごとに更新されませんi = 1。

もう1つの「問題」は、storeData関数内で呼び出しているgetCheckboxValueが、どこにも保存していないことです...その後、後でcheckboxes変数を参照しています- item.features = ["features",checkboxes];. 結果を保存してから、その変数を使用する必要があります。これは、HTML を想定した一部で動作するように見えるデモです。

var $ = function (id) {
    return document.getElementById(id);
};

var getCheckboxValue = function () {
    var checkboxes = document.forms[0].features;
    for (var i = 0, j = checkboxes.length; i < j; i++) {
        if (checkboxes[i].checked) {
            console.log(checkboxes[i].value + " is checked");
        } else {
            //checkboxes = "No";
            console.log(checkboxes[i].value + " is not checked");
        }
    }
};

var storeData = function () {
    var id = Math.floor(Math.random()*10000001);
    var checkedBoxes = getCheckboxValue();
    var item = {};
    item.brand = ["Brand",$("brand").value];
    item.model = ["Model",$("model").value];
    item.comments = ["comments",$("comments").value];
    item.features = ["features",checkedBoxes];

    //Save data into local storage: Use Stringify to convert our object to a string
    localStorage.setItem(id,JSON.stringify(item));
    alert("Contact Saved!");
};


//set link & submit click events
var save = $("button");
save.addEventListener("click", storeData, false);

デモ: http://jsfiddle.net/jmUXY/1/

于 2013-07-17T17:18:05.580 に答える