0

Les cuento que tengo un problema con la selección de hijos en java; Tengo un programa que crea objetos desde javascript, al cual, al hacerle click sobre dicho objeto, debe crearse un marco al rededor de él y luego, al hacer click fuera de este, debe eliminarse dicho marco (seleccionándolo y des-seleccionándolo), el problema es que al crear cada div, luego no se como hacer para referirme a todos los elementos creados por este método (todos los divs creados desde java). Aquí el código:

HTML

 <div class="principal">
        <div class="b" id="b">
         
          <span class="span1" id="span1" >
        </span>
            
          </div>
    </div>

javascript

    let agregar=""; //save elements from second text (will be disabled in the latest version)
    let almacenar=[]; //save all ele");ments from create
    let divb=[]; //save the elements from div of the principal list
    let span1=document.getElementById("span1");
    
let i=0;
    function buscar(){
    i=i+1;
    let div1=document.createElement("div");
    
div1.setAttribute("style","height:10em; width:97.8%; font-size:20px; padding-left:15px; padding-top:10px; margin-bottom:10px; border-radius: 10px; background-color:#283747;color:#FFF; overflow:scroll;");
      
 div1.setAttribute("id",("b"+i));
      div1.addEventListener('click', f);
     span1.appendChild(div1);
}
     let sumar =[];
    let div1="";
    function f(e){
      // e.target es el elemento que lanzó el evento
      div1 =e.target;
     sumar.push(e.target.id);
     
     div1.setAttribute("style","height:10em; width:96.5%; font-size:20px; padding-left:15px; padding-top:10px; margin-bottom:10px; border-radius: 10px; background-color:#283747;color:#FFF; border:5px solid #979A9A;");

   let impar1 =(sumar.length)/2;
     


if(Number.isInteger(impar1)==true){
           
       
        span1.parentNode.setAttribute("style","height:10em; width:97,8%; font-size:20px; padding-left:15px; padding-top:10px; margin-bottom:10px; border-radius: 10px; background-color:#283747;color:#FFF;");
      }
      }

Intente con (span1.parentNode), pues todos los elementos div están dentro de (span1), pues fueron añadidos por (appendChild) al mismo, y pensé que seleccionaría todos los elementos hijos de este, pero no. Más allá de eso, todo bien, incluso si cambio (span1.parentNode) por (div1) funciona perfecto, solo que des-selecciona solo el div pisado y necesito que lo haga con todos para que solo uno de los elementos tenga el margen de "seleccionado".

Muchas gracias por su ayuda.

1 respuesta 1

0

En tu código al estar usando span1.parentNode le estas aplicando en realidad esos estilos al div al nivel superior, que es el que tiene el id "b".

parentNode sirve para seleccionar el elemento padre, si lo que quieres es seleccionar sus hijos debes usar childNodes

Esto devuelve una lista de todos los elementos hijos, es decir los elementos que estan dentro, luego deberías recorrer esa lista con un bucle, aplicando los estilos que necesites.

3
  • Buenas noches, intenté cambiar parentNode por ChildNode, Pero me dice que es indefinido. También intenté colocando el mismo Id a todos los divs que se crean pero sólo funciona cuando hay uno, ya cuando hay más me dice que no es función. Alguna idea?. Muchísimas gracias
    – Adrián21
    Commented el 19 nov. 2020 a las 1:14
  • Seguro que lo escribiste bien? se pone exactamente "childNodes", en el peor de los casos si apuntas a un div que no tiene hijos te retorna una lista vacia, nunca undefined.
    – fabran99
    Commented el 19 nov. 2020 a las 2:07
  • buenas noches. si, ya intente con childNoes escrito de esa forma, de todas formas gracias por la respuesta
    – Adrián21
    Commented el 21 nov. 2020 a las 5:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.