div要素を動的に削除する

私が作成した各div要素をクリックすると動的に削除しようとしています。実際には0とnの間の乱数（入力から）を含む10 divの四角形を作成しました。私が望むのは、それらをクリックして3秒間赤色にしてからそれを削除し、内容をテキストエリアに追加するときです。ここに私のコードです。なぜそれがうまくいかないのか分かってもらえれば幸いです...ありがとう！div要素を動的に削除する

var ti; 
 
function Start() 
 
{ 
 
\t 
 
\t var n=document.getElementById("addnumber").value; 
 
\t for(i=1; i<=10; i++) 
 
\t { 
 
\t \t var divNew = document.createElement("div"); 
 
\t \t divNew.style.height = "50px"; 
 
\t \t divNew.style.width = "50px"; 
 
\t \t divNew.style.border = "5px solid green" 
 
\t \t divNew.style.display = "inline-block"; 
 
\t \t divNew.innerHTML= Math.floor((Math.random()*n)+1); 
 
\t \t document.body.appendChild(divNew); 
 
\t } 
 
} 
 

 

 
var listDivs = document.getElementsByTagName("div"); 
 
var l = document.getElementsByTagName("div").length; 
 
for(let i=0; i<l; i++) 
 
{ 
 
\t listDivs[i].onclick = function(){ 
 
\t \t ti = setInterval(del, 3000); 
 
\t \t function del(){ 
 
\t \t \t listDivs[i].style.backgroundColor="red"; 
 
\t \t \t if (l == 0) 
 
\t \t \t \t clearInterval(ti); 
 
\t \t \t else { 
 
\t \t \t \t document.body.removeChild(listDivs[i]); 
 
\t \t \t \t document.getElementsById("txt").value += listDivs[i].innerHTML; 
 
\t \t \t } 
 
\t \t } 
 
\t }; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t 
 
\t <title></title> 
 
\t <script type="text/javascript" src="testjs.js"></script> 
 
\t <meta charset="utf-8"> 
 

 
</head> 
 
<body> 
 
<p id="date"></p> 
 
<input type="number" name="Number:" id="addnumber"> 
 
<button type="button" id="s" onclick="Start()">Start</button><br> 
 
<textarea id="txt" rows="10" cols="50"></textarea><br> 
 
</body> 
 
</html>

出典

2017-01-13 Anurim

あなたがgetElementsByIdを書くまず第一に、それはgetElementByIdでなければなりません。しかも、あなたは物事をはるかに難しくしました。私は物事を少し簡略化しました。

var ti; 
 

 
function Start() { 
 

 
    var n = document.getElementById("addnumber").value; 
 
    for (i = 1; i <= 10; i++) { 
 
    var divNew = document.createElement("div"); 
 
    divNew.style.height = "50px"; 
 
    divNew.style.width = "50px"; 
 
    divNew.style.border = "5px solid green" 
 
    divNew.style.display = "inline-block"; 
 
    divNew.innerHTML = Math.floor((Math.random() * n) + 1); 
 
    document.body.appendChild(divNew); 
 

 
    divNew.onclick = function() { 
 
     var me = this; 
 
     this.style.backgroundColor = "red"; 
 
     setTimeout(function() { 
 
     document.getElementById("txt").value += me.innerHTML; 
 
     document.body.removeChild(me); 
 
     me = null; 
 
     }, 3000); 
 
    } 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <title></title> 
 
    <script type="text/javascript" src="testjs.js"></script> 
 
    <meta charset="utf-8"> 
 

 
</head> 
 

 
<body> 
 
    <p id="date"></p> 
 
    <input type="number" name="Number:" id="addnumber"> 
 
    <button type="button" id="s" onclick="Start()">Start</button> 
 
    <br> 
 
    <textarea id="txt" rows="10" cols="50"></textarea> 
 
    <br> 
 
</body> 
 

 
</html>

出典

2017-01-13 20:28:32 abeyaz

ええ、今それは動作し、私はそれがそうであると思ったよりも簡単だと思われる。ありがとうございました！：D – Anurim

ti = setInterval(del(i), 3000); 
    function del(index){ 
     return function() { 
     listDivs[index].style.backgroundColor="red"; 
     if (l == 0) 
      clearInterval(ti); 
     else { 
      document.body.removeChild(listDivs[index]); 
      document.getElementById("txt").value += listDivs[index].innerHTML; 
     } 
     }; 
    }

出典

2017-01-13 20:27:43 Igor

このコードがOPに役立つ理由の説明を追加してください。これにより、今後の視聴者からの回答が得られます。詳細については、[回答]を参照してください。 –

'getElementsById'は' getElementById'でなければなりません。 – abeyaz

いくつかの問題：これを参照してくださいあなたは、とにかくダウンカウントを行うので、不要の各要素のためのコールバック関数を作成しないよう

利用setTimeoutの代わりsetInterval、
インデックス番号に依存できないため、クリックされた要素をコールバック関数にバインドします。要素が消えると、インデックス番号がそう変わる。
そうあなたが連結される代わりに、ここで

を追加することを示すためにコメントして、修正それらのものを使用してコードで、アップ追加する前に、数値に文字列を変換します

var ti; 
 
function Start() 
 
{ 
 
\t 
 
\t var n=document.getElementById("addnumber").value; 
 
\t for(i=1; i<=10; i++) 
 
\t { 
 
\t \t var divNew = document.createElement("div"); 
 
\t \t divNew.style.height = "50px"; 
 
\t \t divNew.style.width = "50px"; 
 
\t \t divNew.style.border = "5px solid green" 
 
\t \t divNew.style.display = "inline-block"; 
 
\t \t divNew.textContent = Math.floor((Math.random()*n)+1); 
 
\t \t document.body.appendChild(divNew); 
 
\t } 
 
    var listDivs = document.getElementsByTagName("div"); 
 
    var l = document.getElementsByTagName("div").length; 
 
    console.log(l); 
 
    for(let i=0; i<l; i++) 
 
    { 
 
     listDivs[i].onclick = function(){ 
 
      this.style.backgroundColor = "red"; // move out of callback 
 
      setTimeout(function(){ // don't use setInterval: every element gets 
 
            // its own callback 
 
       document.body.removeChild(this); 
 
       document.getElementById("txt").value = // coerce strings to numbers 
 
         +document.getElementById("txt").value + +this.textContent; 
 
      }.bind(this), 1000); // bind the element, because index will change 
 
     }; 
 
    } 
 
}

<p id="date"></p> 
 
<input type="number" name="Number:" id="addnumber" value=20> 
 
<button type="button" id="s" onclick="Start()">Start</button><br> 
 
<textarea id="txt" rows="2" cols="50"></textarea><br>

また、innerHTMLをtextContentに置き換えました。最初はHTMLを挿入するためです。プレーンテキストは、innerHTMLで設定しないでください。状況によっては、望ましくない副作用が生じる可能性があります。

出典

2017-01-13 20:46:01 trincot

div要素を動的に削除する

答えて

関連する問題