0

Tengo un problema, resulta que tengo en html una lista de divs, en concreto un div padre que contiene todo y luego otros div que a su vez tienen hijos, esto con el fin de clasificarlos por tipo. Y por parte de javascript, tengo un codigo que capta los click que se le hacen a estos, con el fin de que al hacer click en estos elementos, se les dibuje un marco o borde, y donde esta el problema, que al volver a hacer click se elimine este borde y aparezca en el que ha sido clickeado, dando la sensacion que el elemento es el que esta siendo seleccionado.

let sumar = [];
let div1 = "";
b.addEventListener("click", f);
let b2 = document.getElementsByTagName("b2");

function f(e) {
  div1 = e.target;
  sumar.push(e.target.id);
  let impar1 = (sumar.length) / 2;

  div1.setAttribute("style", "border:5px solid #000; ");
  if (Number.isInteger(impar1) == true) {
    b2.setAttribute("style", "*atributos del elemento*");
  }
}
<div class="b" id="b">
  <div id="v1">
    <div class="b2" id="b2">f </div>

    <div class="b2" id="b2">
      <div class="bb1">nombre del producto <br><br> </div>
    </div>

    <div id="v2">
      <div class="b3">
        <div class="bb1">nombre del producto<br><br> especificacion </div>
        <div class="b3" name="gomas">g </div>
      </div>

      <div id="v3">
        <div class="b2" id="b2">
          <div class="bb1">nombre del producto <br><br> especificacion </div>
          <div class="bb2">imagen</div>
        </div>

        <div class="b2" id="b2"> nombre del producto </div>
      </div>
    </div>
  </div>
</div>

Está bastante cercana a funcionar y se porque no funciona; con b2.setAttribute, le devuelvo los valores a cada div a los iniciales (sin el marco), el problema esta en que si capturo el elemento con getelementbyid, este solo toma el primero con ese id, y necesito que los tome todos, y si lo tomo con getelmentsbyclassname, me dice que es indefinido por la razón que explique en los comentarios. Saben como podría tomar todos los elementos con mismo id o solucionar el problema del getelementsbyclassname?.

Cabe destacar que las etiquetas (v1, v2 y v3) son padres, no deseo que el margen se cree al rededor de esta, sino del elemento hijo de estos al cual se le hace click.

2 respuestas 2

0

Para la funcionalidad que quieres podrías definir una clase para cada contenedor (con el fin de escoger todos los contenedores) y justo antes de asignarle el borde al estilo que el usuario acaba de elegír eliminar el estilo de los anteriores, algo cómo así:

function clickerino(e) {

  for (let opcion of  document.getElementsByClassName("opcion")) {
    opcion.setAttribute("style", "border:none; ");
  }
  e.currentTarget.setAttribute("style", " border:5px solid #000; ");

}
<div class="b" id="b">

  <div class="opcion" id="v1" onclick="clickerino(event)">
    <div class="b2" id="b2">f </div>

    <div class="b2" id="b2">
      <div class="bb1">nombre del producto <br><br> </div>
    </div>
  </div>

  <div class="opcion" id="v2" onclick="clickerino(event)">
    <div class="b3">
      <div class="bb1">nombre del producto<br><br> especificacion </div>
      <div class="b3" name="gomas">g </div>
    </div>
  </div>

  <div class="opcion" id="v3" onclick="clickerino(event)">
    <div class="b2" id="b2">
      <div class="bb1">nombre del producto <br><br> especificacion </div>
      <div class="bb2">imagen</div>
    </div>
  </div>

</div>

5
  • Buenas noches. lo acabo de ´probar y tampoco funciona por varias razones, primero, al volver a hacer el click no se borra el estilo, y segundo, crea el borde al rededor de todos los elementos qur contiene el padre, es decir que el borde se hace al rededor de todas las cajas, y yo necesito que solo se marque al rededor del hijo seleccionado.
    – Adrián21
    el 27 nov. 2020 a las 1:03
  • apropósito, puede el getelementbyname tomar los valores al igual que el getelementbyid?, pues pensaba que eran lo mismo solo que uno se llama por el nombre y el otro por id, pero siempre que uso el getelementbyname no me funciona, y si veo lo que devuelve por la consola es distinto, es una lista html y el byid me devuelve lo que almacena de forma literal, esto me ha causado problemas también
    – Adrián21
    el 27 nov. 2020 a las 1:14
  • Bueno, para dar una idea, acabo de probar una forma bastante cercana a funcionar y se porque no funciona, probé cambiando el b.removechild por b2.setattribute, para devolverle sus valores a cada div, el problema esta en que si capturo el elemento con getelementbyid, este solo toma el primero con ese id, y necesito que los tome todos, y si lo tomo con getelmentsbyclassname, me dice que es indefinido por la razón que explique en el mensaje de arriba. saben como podría tomar todos los elementos con mismo id o solucionar el problema del getelementsbyclassname?.
    – Adrián21
    el 27 nov. 2020 a las 1:41
  • ¿Puedes agregar todo esto a tu respuesta editándola? A los moderadores del sitio no les va gustar que utilices la sección para explicar algo relacionado a tu respuesta y además así puedes utilziar el formato correcto para el código y hacerte explicar, especialemnte para la parte de tu idea. Yo supuse que los elementos hijos son las opciones del producto, ya que no queda claro en tu código original y si borra el estilo de las cajas en mi explorador cuando seleccionas otro elemento.
    – FranAcuna
    el 27 nov. 2020 a las 1:56
  • Buenas franacuna, ya lo agregue todo en la misma publicación expresándome mejor, mi error. Ahora, con respecto al nuevo planteamiento, se te ocurre alguna solución?. Muchas gracias por el seguimiento
    – Adrián21
    el 28 nov. 2020 a las 3:34
0

Podes usar las clases de css para tu caso , por ejemplo , si el item tiene la clase .border (ver css)

Los items que necesitas el borde pueden compartir una clase , para el ejemplo te agregue la clase .product , luego guardas esa coleccion de items con querySelectorAll , eso te permite recorrer esa lista de items y a cada uno de ellos le pasas la funcion del evento y le decis de entrada remove la clase .border de todos los items y al e.target que es el item en cuestion el agregas la clase .border

Agregue una validacion porque no habia visto que tambien necesitabas desmarcar el elemento si ya contenia el borde

if(e.target.classList.contains('border')){
//classList.contains devuelve true si contiene la clase y despues si es asi 
la removes y escapas directamente de la funcion con return 
e.target.classList.remove('border')
return

}

const  products = document.querySelectorAll(".product");


 

function borderSelected(e) {
if(e.target.classList.contains('border')){
  e.target.classList.remove('border')
  return

}
 products.forEach(product=> product.classList.remove('border'))
 e.target.classList.add('border')
}

products.forEach(product => {
product.addEventListener("click", borderSelected);
})
.product.border{
border:1px solid black
}
<div class="b" id="b">
  <div id="v1">
    <div class="b2 product" id="b2">f </div>

    <div class="b2" id="b2">
      <div class="bb1 product">nombre del producto <br><br> </div>
    </div>

    <div id="v2">
      <div class="b3">
        <div class="bb1 product ">nombre del producto<br><br> especificacion </div>
        <div class="b3 product" name="gomas">g </div>
      </div>

      <div id="v3">
        <div class="b2" id="b2">
          <div class="bb1 product">nombre del producto <br><br> especificacion </div>
          <div class="bb2 product">imagen</div>
        </div>

        <div class="b2 product" id="b2"> nombre del producto </div>
      </div>
    </div>
  </div>
</div>

1
  • Buenas facu, tengo un par de dudas: que parte exactamente iría el codigo java, pues me lanza errores "e is not defined" y ya intente colocandolo dentro del la funcion donde creo "e", pero igual no funciona; su vez me lanza error en el primer return (Illegal return statement); supongo que por la misma razon del otro. la otra duda es, soy principiante y honestamente no termino de comprender el codigo dentro de la funcion borderSelected(e), incuyendo ese uso del "menor o igual que". gracias por el seguimiento
    – Adrián21
    el 1 dic. 2020 a las 2:57

Tu Respuesta

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

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