Question

我试图在点击它之前动态删除我之前创建的每个div元素。实际上我创建了10个div正方形，其中包含0到n之间的随机数（来自输入），我想要的是当我点击其中任何一个在3秒内将其着色为红色然后将其删除并将内容添加到textarea。这是我的代码。我希望你能让我理解为什么它不起作用......谢谢！

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

<!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>

Answer 1

    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;
        }
      };
    }

Answer 2

首先你写getElementsById，它必须是getElementById。此外，你让事情变得更加困难。我简化了一些事情。见：

＆＃13;

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);
    }
  }
}

＆＃13;

<!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>

＆＃13;

Answer 3

一些问题：

在为每个元素创建回调函数时使用setTimeout代替setInterval，因此无需倒计时等...
将单击的元素绑定到回调函数，因为不能依赖索引号：当元素消失时，索引号也会改变。
在加起来之前将字符串转换为数字，否则您将连接而不是添加

以下是纠正这些内容的代码，其中的注释用于指示：

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.textContent = Math.floor((Math.random()*n)+1);
		document.body.appendChild(divNew);
	}
    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设置纯文本，因为在某些情况下它可能会产生不良副作用。

动态删除div元素

3 个答案: