Working with getElementById( x ).onclick = someFunction

Working with getElementById( x ).onclick = someFunction

本文关键字：onclick someFunction with getElementById Working      更新时间：2023-09-26

我想了很长时间如何定义问题，但我不能，我需要解释代码。

我想在JavaScript中做一个简单的组织者。您输入任务并单击"添加到列表"按钮，脚本将生成一个带有段落的复选框，其中包含任务的文本。第二部分是禁用复选框，并在单击任务文本时勾选它。我试图通过给每个复选框创建一个函数(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>

问题是，当您执行.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中打补丁，但这只是为了简单的演示。

相关文章：