Question

ok finaly几乎完成了本教程我在最后一部分是我可以点击跨度上的项目使它们消失，我点击它们并且它们不会消失任何人都知道为什么？这是我的代码

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

}

Answer 1

您的代码中似乎存在拼写错误。 replace方法接受由comma分隔的两个参数。在您的代码中，有一个+符号，而不是,。

使用以下代码。 Working Sample

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

}

当我在span Javascript上单击它们时，项目不会消失

1 个答案: