0

最後に、このチュートリアルをほぼ終了しました。スパン上のアイテムをクリックして非表示にすることができる最後の部分にいます。それらをクリックしていますが、非表示になりません。ここに私のコードがあります

 <!doctype html>
<html>
    <head>

    <title>To do list with html and javascript</title>
    <style>
     ul { list-style: none; padding: 0; margin: 0; width: 400px;}
     li { border: 1px solid #ccc; background: #eee; padding: 10px 15px; color: #000; }
     li span { padding-left: 10px;}
     .checked { text-decoration: line-through; font-weight: bold; color: #c00;}
        </style>
    </head>
    <body>
<h1>To Do List</h1>
<p><input type="text" id="inItemText"/></p> 

<ul id="todolist">
</ul>



<script src="todo.js"></script>
    </body>
</html>

と

function updateItemStatus() {
    var cbId = this.id.replace("cb_","");
    var itemText = document.getElementById("item_" + cbId);

    if (this.checked) {
        itemText.className = "checked";
    } else {
        itemText.className = "";
    }
}

function removeItem() {
    var spanId = this.id.replace("item_" + "");
    document.getElementById("li_" + spanId).style.display = "none";

}



function addNewItem(list, itemText){

    var date = new Date();
    var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds(); 

    var listItem = document.createElement

("li");
        listItem.id = "li_" + id;
        var checkBox = document.createElement ("input");
        checkBox.type = "checkbox";
        checkBox.id = "cb_" + id;
        checkBox.onclick = updateItemStatus;


        var span = document.createElement("span");
        span.id = "item_" + id;
        span.innerText = itemText;
        span.onclick = removeItem;


        listItem.appendChild(checkBox);
        listItem.appendChild(span);

        list.appendChild(listItem);

    }


    var inItemText = document.getElementById("inItemText");
    inItemText.focus();
    inItemText.onkeyup = function(event) {


        if (event.which == 13) {
            var itemText = inItemText.value;

            if (!itemText || itemText == "undefined") {
                return false;
            }

            addNewItem(document.getElementById("todolist"), itemText);

            inItemText.focus();
            inItemText.select();
        };

}
4

1 に答える 1

1

コードにタイプミスがあるようです。このreplaceメソッドは、 で区切られた 2 つのパラメーターを受け入れますcomma。あなたのコードには、の+代わりにシンボルがあります,。

以下のコードを使用します。作業サンプル

function removeItem() {
    var spanId = this.id.replace("item_", ""); //Note the change
    console.log(this.id + spanId);
    document.getElementById("li_" + spanId).style.display = "none";

}
于 2013-08-17T03:14:12.167 に答える