使用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

回答

相關問題