elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ¿como modificar un array declarada en un archvio js desde un onclick?		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ¿como modificar un array declarada en un archvio js desde un onclick?  (Leído 4,259 veces)
Drakaris

Desconectado Desconectado

Mensajes: 286


Todo lo que puedas imaginar, lo puedes crear.


Ver Perfil
¿como modificar un array declarada en un archvio js desde un onclick?
« en: 13 Diciembre 2020, 11:54 am »
Buenas, estoy haciendo un registro de jugadores, de manera dinamica, que cuando rellenas un formulario, se guarda en un array los datos y posteriormente se añade a una lista HTML un item con el jugador.
img: https://drive.google.com/file/d/1hOvYRr46p17064tz_1pf9hkF8Lw764Rr/view?usp=sharing

Cuando pasas por el item del jugador, puedes eliminar el usuario, lo hice con un evento onclick, pero mi problema esta que el onclick debe acceder al array definida en el archivo js para poder eliminar el subarray del jugador.

IMPORTANTE: los subarrays se añaden dinamicamente durante el envio del formulario.
file js:
Código
  1.  var players=[
  2.     ["player1"],
  3.     ["player2"],
  4. ];
  5.  

HTML:
Código
  1. <html>
  2.     <head>
  3.          <script src='file.js'></script>
  4.     </head>
  5.                         <i class="fas fa-times-circle close-player" onclick="
  6.                             players.splice(this.parentNode.id,1);
  7.                             this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
  8.                             console.log(players);
  9.                         "></i>
  10. </html>
  11.  

El problema esta en que me sale como si players no estuviera definido.
Citar
Uncaught ReferenceError: players is not defined

Como lo puedo resolver con onclick?

Gracias
En línea
Lo increible, no es lo que ves, sino como es
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: ¿como modificar un array declarada en un archvio js desde un onclick?
« Respuesta #1 en: 13 Diciembre 2020, 16:17 pm »
players tendría que ser una variable global. ¿Ese es el contenido tal cual de tu file.js?
En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: ¿como modificar un array declarada en un archvio js desde un onclick?
« Respuesta #2 en: 13 Diciembre 2020, 16:26 pm »
No hagas eso. Nunca más. Te lo prohíbo xD

El javascript inline esta bien para meter cosas pequeñas y tal... pero no pare meter 500 lineas de JS xD


Dicho esto, realmente no veo porque te tiene que fallar. Aparte de la gorseria esa y que el <i> lo metes fuera del <body>...

Pero vamos, tu código lo podrías estructurar mucho mejor..

Código
  1. var players = [
  2.     ["player1"],
  3.     ["player2"],
  4.     ["player3"],
  5.     ["player4"],
  6.     ["player5"],
  7. ];
  8.  
  9.  
  10. function removePlayer(node) {
  11.     let parentNode     = node.parentNode;
  12.     let grandNode      = parentNode.parentNode;
  13.     let grandGrandNode = grandNode.parentNode;
  14.  
  15.     players.splice(parentNode.id, 1);
  16.     grandGrandNode.remove(grandNode);
  17.  
  18.     console.log(players);
  19. };
  20.  
  21. document.querySelector('.close-player').addEventListener('click', function(event) {
  22.     removePlayer(event.target);
  23. });

Código
  1. <i class="fas fa-times-circle close-player"></i>


Así lo tienes todo en el mismo script y el html te queda bien limpio...


O incluso podrias estructurar mejor el HTML y facilitar las cosas aun más.

Código
  1. <div>                         <!-- grandGrandNode -->
  2.     <div class="playerItem">  <!-- grandNode -->
  3.         <div data-player="3"> <!-- parentNode -->
  4.             <i class="fas fa-times-circle close-player">t</i>
  5.         </div>
  6.     </div>
  7. </div>

Código
  1. function removePlayer(node) {
  2.     let playerID = parseInt(node.parentNode.dataset.player);
  3.  
  4.     players.splice(playerID, 1);
  5.     node.closest('.playerItem').remove();
  6.  
  7.     console.log(players);
  8. };
  9.  
  10. document.querySelector('.close-player').addEventListener('click', function(event) {
  11.     removePlayer(event.target);
  12. });


Saludos
« Última modificación: 13 Diciembre 2020, 16:30 pm por #!drvy » En línea
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: ¿como modificar un array declarada en un archvio js desde un onclick?
« Respuesta #3 en: 13 Diciembre 2020, 16:48 pm »
En vez de declarar el array en el archivo yo crearía un módulo ES6 que lo retorne.

players.mjs
Código
  1. let getPlayers = () => [
  2.     ["player1"],
  3.     ["player2"],
  4. ];
  5.  
  6. export default getPlayers;


index.html
Código
  3. <meta charset="utf-8">
  4. <script type="module">
  5. import getPlayers from "./players.mjs";
  6.  
  7. let players = getPlayers();
  8. console.log(players);
  9. // aquí puedes meter más código para trabajar con players.
  11. </head>
  12. </html>


No suele ser buena idea trabajar con inline javascript (onClick) cuando es posible utilizarlo desde un script.
Puedes usar
Código
  1. let i = document.createElement("i");
  2. i.className = "bla bla";
  3. i.addEventListener("click", function(evento) {
  4.   // evento.target ....
  5.   // evento.target.parentElement
  6.   // evento.target.parentNode
  7.   // ...
  8. });
  9. body.appendChild(i);
...
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Drakaris

Desconectado Desconectado

Mensajes: 286


Todo lo que puedas imaginar, lo puedes crear.


Ver Perfil
Re: ¿como modificar un array declarada en un archvio js desde un onclick?
« Respuesta #4 en: 13 Diciembre 2020, 17:14 pm »
Gracias chicos, entiendo que el inline no se recomienda, pero antes no veía otra forma de hacerlo. Mi archivo js es mucho más grande y complejo, porque la lista de jugadores es dinamico, declaro en un principio el array sin elementos y mientras añado los jugadores añado subarrays al array players.

Lo que he hecho es seleccionar todos los elementos con la clase close-player y con un bucle for hago los listening (no se me ocurrio....)
Código:
        list_ids=document.getElementsByClassName("close-player");
        for(x=0;x<=list_ids.length-1;x++){
            document.getElementById(list_ids[x].id).addEventListener("click",function(){
                players.splice(this.id,1);
                this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                console.log(players);
            });            
        }

P.D: El document.querySelector() no puede utilizarlo porque me funcionaba la primera vez que añado un jugador pero no los posteriores.
En línea
Lo increible, no es lo que ves, sino como es
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: ¿como modificar un array declarada en un archvio js desde un onclick?
« Respuesta #5 en: 13 Diciembre 2020, 17:47 pm »
Probaste usando Ajax, ya sea XHR o fetch en lugar de modificar un archivo? Creo que es la manera más adecuada de hacer lo que quieres. Incluso una API REST podría ser lo más adecuado.
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
agregar elementos a un gridview desde vento onclick de otro form, sharp
.NET (C#, VB.NET, ASP) 		gos920 4 9,232 Último mensaje 10 Julio 2008, 16:16 pm
por MANULOMM
Como llenar este array desde una consulta a la DB?
PHP 		luison 4 19,005 Último mensaje 15 Febrero 2010, 16:49 pm
por luison
como modificar un archivo php desde otro
PHP 		General Dmitry Vergadoski 4 3,366 Último mensaje 9 Agosto 2014, 03:01 am
por MinusFour
como modificar el valor de un array ?
PHP 		JaimeN 3 2,430 Último mensaje 22 Abril 2019, 21:41 pm
por mchojrin
[Resuelto] Como modificar el CSS desde javascript.
Desarrollo Web 		zellion 6 3,771 Último mensaje 30 Agosto 2019, 00:35 am
por zellion
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines