使用getElementById（x）.onclick = someFunction

我想了很久如何定义问题，但我不能，我需要解释代码。使用getElementById（x）.onclick = someFunction

我想在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>

来源

2014-07-05 user1932153

这是您的完整密码吗？ – Mritunjay

我建议把一个简单的[JS小提琴]（http://jsfiddle.net/）或类似的演示。将所有内容剥离到重现问题所需的最小*代码量。（如果您以前没有使用过，请参阅文档中的“[how to]（http://doc.jsfiddle.net/）”。顺便说一下，如果您要做的只是更改演示文稿，那么：'input：checked + span {text-decoration：line-through; }'（或者：'input [disabled] + span'） –

你想通过编辑样式表来改变样式吗？我想也许一些基本的教程会对你有所帮助。 –

的问题是，当你做.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中进行了修补，但这仅仅是为了简单的演示。

来源

2014-07-05 17:42:50

不是批评，但有没有你选择使用'insertAdjacentHTML（）'而不是'.appendChild（）'的原因，除了前者允许使用相同的HTML字符串（而不是创建/附加节点）？ –

谢谢。是使用insertAdjacentHTML或createElement和appendChild更好吗？还是它是相同的？ – user1932153

@DavidThomas：这是唯一的原因。我个人更喜欢DOM创建方法，但是因为他使用的是HTML，所以我认为我会提供更好的方式来使用HTML。 –

使用getElementById（x）.onclick = someFunction

回答

相关问题