Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Buscar objetos creados dinamicamente con appendChild

JavaScript - Buscar objetos creados dinamicamente con appendChild

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Buscar objetos creados dinamicamente con appendChild

Publicado por David (5 intervenciones) el 28/03/2022 22:10:46
Hola a todos,

estoy creando un site que tiene un frameset con top, left y main pages.

El left frame obtiene datos de un servidor, y va creando dinamicamente, una cantidad de botones, que activan procesos acordes a los datos de cada registro. Hasta ahora todo funciona bien.

Cada uno de esos botones del left frame ejecuta una accion en el frame main, en especial, la vista de una localizacion en el google maps. Tambien esto funciona bien.

La idea es que en cada boton del frame left, ademas de las acciones de mapa, pueda cambiar el color del boton seleccionado. tengo control del id de cada boton, pero parece que no hay relectura del contenido del frame left.

el proceso que ejecuta cada boton es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript">
 
  function addbutton(imagen,id,lat,long) {
    const espacio = document.createElement("p");
    document.body.appendChild(espacio);
 
 
    var btn = document.createElement("button");
 
    btn.setAttribute("id","b"+id);
    btn.style.width = '240px';
    btn.style.height = '80px';
    btn.style.background = '#FAE6E6';
    btn.style.color = 'black';
    btn.style.fontSize = '20px';
    btn.style.border = '4';
    btn.style.borderRadius = '12px';
    btn.style.cursor = 'pointer';
    btn.innerHTML = "<img src="+imagen+" width='64' height='64'>Alerta "+id;
 
    btn.onclick = function(){
 
      localStorage.setItem("id_actual", id);
      localStorage.setItem("id_previo", localStorage.getItem("id_actual"));
 
      var url = 'https://maps.google.com/maps?q='+lat+','+long+'&z=16&ie=UTF8&iwloc=&output=embed';
      parent.main1.document.getElementById('gmap_canvas').src=url; return false;
    };
 
    document.body.appendChild(btn);
 
  };
 
  </script>

No encuentro manera de seleccionar un boton aleatoriamente (debo cambiar el atributo de color del boton anterior y poner el nuevo color en el boton actualmente seleccionado)

Tal vez alguien me pueda orientar para poder acceder a un determinado boton buscando un getElementById o algo asi, y cambiar el atributos de cada objeto (color, font, etc.)

Infinitas gracias,
David
alerta6
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Buscar objetos creados dinamicamente con appendChild

Publicado por Ivan (118 intervenciones) el 31/03/2022 12:31:33
Hola,

puedes acceder al DOM y con ello a los botones de varias formas:

Forma tradicional
Si les asignas un ID único a cada botón:
let item = document.getElementById("id");
item es el elemento ID encontrado

Si les asignas una clase determinada:
let items = document.getElementsByClassName("item");
items será un Array con los elementos encontrados

Lo mismo si les asignas un nombre (name) o por tag (button)
getElementsByName(name)
getElementsByTagName(tag)

Métodos modernos

Parecido a getElementsByClassName pero con selectores CSS
Devuelve un elemento que coincide con la búsqueda
let page = document.querySelector("#page");
let info = document.querySelector(".main .info");

Con querySelectorAll() obtenemos un Array con todos los elementos encontrados

Espero que te sirva.

Un Saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Buscar objetos creados dinamicamente con appendChild

Publicado por Alejandro (532 intervenciones) el 31/03/2022 17:18:35
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<head>
	<style>
		.active {
			background:gold;
		}
	</style>
	<script type="text/javascript">
		function addbutton(texto) {
			const espacio = document.createElement("p");
			document.body.appendChild(espacio);
 
			var btn = document.createElement("button");
			btn.appendChild(document.createTextNode(texto))
 
			btn.onclick = function(){
				if( document.querySelector('button.active') ){
					document.querySelector('button.active').classList.remove('active');
				}
				this.classList.add('active')
				return false;
			};
 
			document.body.appendChild(btn);
		};
 
		window.addEventListener('load', function(){
			for(i=1; i<=5; i++){
				addbutton('Botón '+i);
			}
		});
	</script>
</head>
<body>
</body>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Buscar objetos creados dinamicamente con appendChild

Publicado por David (5 intervenciones) el 03/04/2022 05:51:30
Muchas gracias a ambos,

Pude encontrar la manera mas lógica de resolver el problema de una manera consistente.
Como primera medida, estaba apuntando mal al nodo donde debía agregar el objeto.
esto lo resolví mediante:

parent.left.document.getElementById('body').appendChild(boton);

Hecho esto, logré entender que la función para acceder aleatoriamente a cualquier objeto, estaba mal construida.

el código correcto es:

parent.left.document.getElementById('b639').style.background = 'red';

donde me resulta facil recomponer el id del objeto, para poder cambiar las propiedades.

Muchisimas gracias nuevamente,
David desde Buenos Aires, Argentina.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar