Question

我想了很久以来如何定义问题，但我无法解释代码。

我想在JavaScript中创建一个简单的组织器。您输入任务并单击按钮＆＃34;添加到列表＆＃34;并且脚本使用包含任务文本的段落创建一个复选框。第二部分是禁用复选框，并在单击它时浏览任务文本。我尝试通过给每个复选框创建一个函数（destroyIt（），它按ID获取元素而不是禁用它，但它只适用于添加到页面的最后一个复选框。我正在查看此代码很长时间我看不出有什么问题。请帮忙。这是我的代码：

<html>
<head>

    <style id="stil">
        .over{
            text-decoration:line-through;
        }
    </style>


    <script type="text/javascript">
        var numberOfTasks=1;

        function insertNew(){
            tekst = document.getElementById("zadatak").value;
            if(tekst.length>0){
                var idEl= "check"+numberOfTasks;

                document.getElementById("ispis").innerHTML+="<input type='checkbox' id='check"+numberOfTasks+"'> "+"<span class='"+idEl+"'>"+tekst+"</span> <br/>";

                document.getElementById(idEl).onclick= function(){ destroyIt(idEl); };

                numberOfTasks++;
            }
        }       
        function destroyIt(idEl){
            document.getElementById(idEl).disabled=true;
            document.getElementById("stil").innerHTML+= "."+idEl+"{text-decoration:line-through;}";
            alert(idEl+"{text-decoration:line-through;}");
        }


    </script>
</head>

<body>
    Tasks for: <span id="date"> </span>

    <script>
        var date= new Date();
        document.getElementById("date").innerHTML= ""+ date.getDay() +"." +date.getMonth() +"." +date.getFullYear();
    </script>

    <br/> <br/>
    New task: <input type="text" id="zadatak"> <button onclick="insertNew()"> add to the list </button>

    <button onclick="provera()">Provera</button>
    <p id="ispis"> </p>
</body>

Answer 1

问题是当你执行.innerHTML += "..."时，它会破坏现有节点及其事件处理程序，并用新的干净节点替换它们。出于这个原因和其他原因，您几乎不应在+=之后使用.innerHTML。

从HTML标记插入新内容的更好方法是使用.insertAdjacentHTML()代替。第一个参数描述了相对于调用它的元素的位置，第二个参数是新内容。

因此，.insertAdjacentHTML()的代码如下所示：

function insertNew(){
    tekst = document.getElementById("zadatak").value;
    if(tekst.length>0){
        var idEl= "check"+numberOfTasks;

        document.getElementById("ispis")
                .insertAdjacentHTML("beforeEnd", "<input type='checkbox' id='check"+numberOfTasks+"'> "+"<span class='"+idEl+"'>"+tekst+"</span> <br/>");

        document.getElementById(idEl).onclick= function(){ destroyIt(idEl); };

        numberOfTasks++;
    }
}

此外，您可以修改destroyIt函数以对其this值进行操作，这将为您提供具有处理程序的input元素。然后，您可以使用其.id来获取span的类，或者您可以遍历到下一个元素。

此外，您不应修改样式表以隐藏元素。只需添加一个类或直接样式属性。

所以在上面的函数中，这个：

document.getElementById(idEl).onclick= function(){ destroyIt(idEl); };

成为这个：

document.getElementById(idEl).onclick= destroyIt;

然后destroyIt函数变为：

function destroyIt(){
    var span = this.nextElementSibling;
    this.disabled=true;
    span.style.textDecoration = "line-through";
}

.nextElementSibling需要在IE8中进行修补，但这只是为了简单演示。

使用getElementById（x）.onclick = someFunction

1 个答案: