Estoy tratando de eliminar cada elemento div que he creado antes dinámicamente cuando hago clic en él. En realidad, creé 10 cuadrados div que contienen números aleatorios entre 0 yn (de entrada) y lo que quiero es cuando hago clic en cualquiera de ellos para colorearlo en rojo durante 3 segundos y luego lo elimino y agrego el contenido al área de texto. Aquí está mi código. Espero que puedas hacerme entender por qué no funciona ... ¡Gracias!

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>
0
Anurim 13 ene. 2017 a las 23:20

3 respuestas

La mejor respuesta

En primer lugar, debe escribir getElementsById, debe ser getElementById. Además, hiciste las cosas mucho más difíciles. Simplifiqué un poco las cosas. Mira esto:

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>
0
Barmar 13 ene. 2017 a las 20:35

Algunos asuntos:

  • Utilice setTimeout en lugar de setInterval mientras crea una función de devolución de llamada para cada elemento de todos modos, por lo que no es necesario hacer una cuenta regresiva, etc.
  • Enlace el elemento en el que se hizo clic a la función de devolución de llamada, porque no se puede confiar en el número de índice: a medida que los elementos desaparecen, los números de índice también cambian.
  • Convierta cadenas en números antes de sumar, de lo contrario estará concatenando en lugar de sumar

Aquí está el código con esas cosas corregidas, con comentarios para indicar dónde:

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>

También reemplacé innerHTML por textContent, ya que el primero está destinado a insertar HTML. El texto sin formato no se debe establecer a través de innerHTML ya que en algunas situaciones podría tener efectos secundarios no deseados.

0
trincot 13 ene. 2017 a las 20:46
    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;
        }
      };
    }
0
Igor 13 ene. 2017 a las 20:33