0

Tengo el siguiente código.
Lo que hago es llamar a todos los elementos que tienen la clase 'btn', y los almaceno dentro de una variable 'btns', y se guardan en forma de array.

Luego a cada elemento que tengo le agrego un .addEventListener de tipo clic, el cual envía un formulario mediante document.nombre_formulario.submit()

let btns = document.getElementsByClassName('btn');

btns[0].addEventListener('click', function(){
  document.b0.submit()
});
btns[1].addEventListener('click', function(){
  document.b1.submit()
});
btns[2].addEventListener('click', function(){
  document.b2.submit()
});
btns[3].addEventListener('click', function(){
  document.b3.submit()
});
btns[4].addEventListener('click', function(){
  document.b4.submit()
});
btns[5].addEventListener('click', function(){
  document.b5.submit()
});
btns[6].addEventListener('click', function(){
  document.b7.submit()
});
btns[7].addEventListener('click', function(){
  document.b7.submit()
});
btns[8].addEventListener('click', function(){
  document.b8.submit()
});
.st1{
  cursor: pointer;
}

.st0{fill:none;}.st1{fill:#01133D;}.st2{font-weight: 600;}.st3{font-size:45px;}

.none{
  display: none;
}
<div class="none">
  <form action="/reportar-daño/genre" method="post" name="b0">
    <input type="hidden" name="bloque" value="Bloque 0">
  </form>
  <form action="/reportar-daño/genre" method="post" name="b1">
    <input type="hidden" name="bloque" value="Bloque 1">
  </form>
  <form action="/reportar-daño/genre" method="post" name="b2">
    <input type="hidden" name="bloque" value="Bloque 2">
  </form>
  <form action="/reportar-daño/genre" method="post" name="b3">
    <input type="hidden" name="bloque" value="Bloque 3">
  </form>
  <form action="/reportar-daño/genre" method="post" name="b4">
    <input type="hidden" name="bloque" value="Bloque 4">
  </form>
  <form action="/reportar-daño/genre" method="post" name="b5">
    <input type="hidden" name="bloque" value="Bloque 5">
  </form>
  <form action="/reportar-daño/genre" method="post" name="b6">
    <input type="hidden" name="bloque" value="Bloque 6">
  </form>
  <form action="/reportar-daño/genre" method="post" name="b7">
    <input type="hidden" name="bloque" value="Bloque 7">
  </form>
  <form action="/reportar-daño/genre" method="post" name="b8">
    <input type="hidden" name="bloque" value="Bloque 8">
  </form>
</div>

<svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3194 1704">
  <defs><style>.cls-1{fill:none;}.cls-2{fill:#01133d;}</style></defs>
  <rect class="st0" width="3212" height="1704"/>
  <a href="#" class="btn">
    <circle class="st1 bq" cx="924" cy="245" r="47.5"/>
    <text transform="matrix(1 0 0 1 650.947 261.9419)" class="st2 st3">Bloque 0</text>
  </a>

  <a href="#" class="btn">
    <circle class="st1" cx="2088" cy="340" r="47.5"/>
    <text transform="matrix(1 0 0 1 2110.0256 444.7575)" class="st2 st3">Bloque 1</text>
  </a>

  <a href="#" class="btn">
    <circle class="st1" cx="2462" cy="340" r="47.5"/>
    <text transform="matrix(1 0 0 1 2543.1963 352.9999)"><tspan x="0" y="0" class="st2 st3">Bloque 2</tspan></text>
  </a>
  
  <a href="#" class="btn">
    <circle class="st1" cx="2629" cy="737" r="47.5"/>
    <text transform="matrix(1 0 0 1 2715.6465 751.45)" class="st2 st3">Bloque 3</text>
  </a> 
  
  <a href="#" class="btn">
    <circle class="st1" cx="2224.5" cy="815" r="47.5"/>
    <text transform="matrix(0.8746 0.4848 -0.4848 0.8746 2130.384 877.3813)"><tspan x="0" y="0" class="st2 st3">Bloque 4</tspan>></text>
  </a>
  
  <a href="#" class="btn">
    <circle class="st1" cx="1930" cy="689" r="47.5"/>
    <text transform="matrix(1 0 0 1 1850.0803 784.5)" class="st2 st3">Bloque 5</text>
  </a>
  
  <a href="#" class="btn">
    <circle class="st1" cx="2088" cy="1374" r="47.5"/>
    <text transform="matrix(1 0 0 1 2010.3236 1482.0002)" class="st2 st3">Bloque 6</text>
  </a>
  
  <a href="#" class="btn">
    <circle class="st1" cx="1109" cy="1469" r="47.5"/>
    <text transform="matrix(1 0 0 1 1180.0188 1491.4501)" class="st2 st3">Bloque 7</text>
  </a>  
  
  <a href="#" class="btn">
    <circle class="st1" cx="475" cy="1421" r="47.5"/>
    <text transform="matrix(1 0 0 1 397.6863 1534.4501)" class="st2 st3">Bloque 8</text>
  </a>  
</svg>

Como se observa, tanto el índice del elemento que llamo en el array btns[0] y el nombre del formulario b0 cuentan con el mismo número, pero siento que es un proceso muy repetitivo y quiero ver si hay la forma de automatizar ese proceso.

Nota: Estoy trabajando con Flask (python) para el backend y envío dichos datos por post. No encontré otra forma de hacer que se envíen los datos al hacer clic en cierto elemento dentro de un svg que no fuera mediante <a href="#"> </a>, por eso la función de document.nombre_formulario.submit() en JavaScript.

3
  • ¿Puedes poner el html de esos elementos? Pulsa sobre el enlace editar que aparece en el pie de la pregunta para modificarla las veces que creas necesario, gracias.
    – masterguru
    el 19 oct. 2022 a las 15:45
  • como Tenes el array con objetos adentro o solo un simple array? ejemplo: array = [1,2,3,4,5]
    – Roy
    el 19 oct. 2022 a las 15:53
  • Ya incluí el html para que se pueda entender lo que quiero hacer. el 19 oct. 2022 a las 16:01

2 respuestas 2

0

No se de Flask pero supongo que es algo asi lo que buscas hacer

let btns = document.getElementsByClassName('btn');

for(var i = 0; i < btns.length; i++){
   var nombreForm = 'b' + i;
   btns[i].addEventListener('click', function(){
   document.nombreForm.Submit();
   });
}
0

Reduciendo todo tu código yo haría estos cambios:

  1. Quitaria todos los formularios dejando solo uno, pues si te fijas todos son muy semejantes y con el mismo action y el mismo name en el input, y lo único significativo que cambia es el value del input

  2. Este uno lo pondría así:

<form id="elformulario" action="/reportar-daño/genre" method="post">
    <input id="bloque" type="hidden" name="bloque" value="">
</form>

donde se ha agregado un id="elformulario" para poder llamarlo desde javascript cómodamente e identificándolo de forma única, y se ha suprimido el name de la etiqueta pues en esta solución no lo vamos a usar.

Fijarse que también se ha agregado un id al input, para también identificarlo después en el javascript de forma única.

  1. En el javascript, tanto addEventListener() no parece demasiado óptimo, y lo he reducido al siguiente código:
// ponemos la escucha en el padre de todos los enlaces
Capa_2.addEventListener('click', function(event){

  // localizamos el elemento a padre del elemento clicado
  let a_padre_clicado = event.target.closest("a")

  // asignamos al input con id bloque su value
  bloque.value = "Bloque "+ ([...Capa_2.children].indexOf(a_padre_clicado)-2).toString()
  
  // enviamos el formulario
  elformulario.submit()
});

Explicación ampliada del javascript

En esta línea:

Capa_2.addEventListener('click', function(event){
  • Capa_2: es el id que apunta al elemento padre que contiene los enlaces <a>
  • Ponemos ese código para tan solo escuchar al elemento padre (Capa_2), con addEventListener(), el cual, dada la delegación de eventos, también recibe todos los eventos de sus hijos, a los cuales podemos identificar con la propiedad event.target:
a_padre_clicado = event.target.closest("a")

Así pues, si sabemos que event.target se corresponde con el elemento clicado, y conociendo la estructura del contenido de los elementos a, vemos que sólo pueden ser hijos de dicho elemento, y se corresponderán o bien con un elemento <circle> o bien <text> en este caso concreto.

Siendo así, ahora queremos saber cual es el padre del elemento clicado, y lo buscamos con el método closest(), el cual busca la primera coincidencia entre los ancestros del elemento event.target en este caso.

Y todo esto lo asignamos a una variable que denominamos a_padre_clicado, pues tal como su nombre pretende indicar, se corresponde con el elemento a padre que contiene el elemento hijo clicado (identificado con event.target).

Luego viene esta otra línea un poco más compleja:

bloque.value = "Bloque "+ ([...Capa_2.children].indexOf(a_padre_clicado)-2).toString()

con la que pretendemos asignar al input con el id bloque un valor, que estará compuesto de la palabra "Bloque " a la cual le concatenamos el índice del elemento a_padre_clicado, el cual lo buscamos de este modo:

([...Capa_2.children].indexOf(a_padre_clicado)-2)

donde:

  • [...Capa_2.children]: representa un array generado mediante la sintaxis de desestructuración y que cada elemento del array va a ser uno de los elementos hijos del elemento padre Capa_2, gracias a la propiedad children.
  • indexOf(a_padre_clicado): localiza el número de índice del elemento a_padre_clicado dentro de ese array anterior, gracias al método indexOf()
  • -2: es un número que vamos a restar a dicho íncide del elemento a_padre_clicado encontrado en las instrucciones anteriores. ¿Y porque? Pues porque el padre de a_padre_clicado no solo contiene como hijos los elementos <a>, sino que empieza con dos distintos, a saber:
<defs><style>.cls-1{fill:none;}.cls-2{fill:#01133d;}</style></defs>
<rect class="st0" width="3212" height="1704"/>

y luego sí, el resto son elementos <a> consecutivos, por lo tanto debemos restarlos para saber el número de orden del elemento <a> clicado real, sin contar con esos otros dos.

Y para asegurarnos que la concatenación entre strings va a ser correcta, pasamos el resultado de las instrucciones anteriores a string mediante el método toString().

Por lo tanto, como decía, esta línea consigue asignar al input con id bloque el value esperado:

bloque.value = "Bloque "+ ([...Capa_2.children].indexOf(a_padre_clicado)-2).toString()

el cual será "Bloque x", donde la x representa el índice de <a> tal como acabo de explicar.

Por último, como ya tenemos el valor puesto en el input en la instrucción anterior, ya podemos enviar el formulario de este modo:

  elformulario.submit()

Ya nos dirás si lo has entendido y te ha funcionado (y si has leído tenido la paciencia de leerlo todo hasta aquí, jeje)

Aquí dejo un snippet completo (que aquí no parece hacer nada, pero aquí se puede apreciar mejor que lo intenta a pesar del error 404 porque no existe el script del action):

// ponemos la escucha en el padre de todos los enlaces
Capa_2.addEventListener('click', function(event) {

  // localizamos el elemento a padre del elemento clicado
  el_a = event.target.closest("a")

  // asignamos al input con id bloque su value
  bloque.value = "Bloque " + ([...Capa_2.children].indexOf(el_a) - 2).toString()

  // enviamos el formulario
  elformulario.submit()
});
st1 {
  cursor: pointer;
}

.st0 {
  fill: none;
}

.st1 {
  fill: #01133D;
}

.st2 {
  font-weight: 600;
}

.st3 {
  font-size: 45px;
}

.none {
  display: none;
}
<div class="none">
  <form id="elformulario" action="/reportar-daño/genre" method="post">
    <input id="bloque" type="hidden" name="bloque" value="">
  </form>
</div>

<svg id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3194 1704">
  <defs><style>.cls-1{fill:none;}.cls-2{fill:#01133d;}</style></defs>
  <rect class="st0" width="3212" height="1704"/>
  <a href="#" class="btn">
    <circle class="st1 bq" cx="924" cy="245" r="47.5"/>
    <text transform="matrix(1 0 0 1 650.947 261.9419)" class="st2 st3">Bloque 0</text>
  </a>

  <a href="#" class="btn">
    <circle class="st1" cx="2088" cy="340" r="47.5"/>
    <text transform="matrix(1 0 0 1 2110.0256 444.7575)" class="st2 st3">Bloque 1</text>
  </a>

  <a href="#" class="btn">
    <circle class="st1" cx="2462" cy="340" r="47.5"/>
    <text transform="matrix(1 0 0 1 2543.1963 352.9999)"><tspan x="0" y="0" class="st2 st3">Bloque 2</tspan></text>
  </a>
  
  <a href="#" class="btn">
    <circle class="st1" cx="2629" cy="737" r="47.5"/>
    <text transform="matrix(1 0 0 1 2715.6465 751.45)" class="st2 st3">Bloque 3</text>
  </a> 
  
  <a href="#" class="btn">
    <circle class="st1" cx="2224.5" cy="815" r="47.5"/>
    <text transform="matrix(0.8746 0.4848 -0.4848 0.8746 2130.384 877.3813)"><tspan x="0" y="0" class="st2 st3">Bloque 4</tspan>></text>
  </a>
  
  <a href="#" class="btn">
    <circle class="st1" cx="1930" cy="689" r="47.5"/>
    <text transform="matrix(1 0 0 1 1850.0803 784.5)" class="st2 st3">Bloque 5</text>
  </a>
  
  <a href="#" class="btn">
    <circle class="st1" cx="2088" cy="1374" r="47.5"/>
    <text transform="matrix(1 0 0 1 2010.3236 1482.0002)" class="st2 st3">Bloque 6</text>
  </a>
  
  <a href="#" class="btn">
    <circle class="st1" cx="1109" cy="1469" r="47.5"/>
    <text transform="matrix(1 0 0 1 1180.0188 1491.4501)" class="st2 st3">Bloque 7</text>
  </a>  
  
  <a href="#" class="btn">
    <circle class="st1" cx="475" cy="1421" r="47.5"/>
    <text transform="matrix(1 0 0 1 397.6863 1534.4501)" class="st2 st3">Bloque 8</text>
  </a>  
</svg>

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.