0

buen día.
Mi pregunta es: ¿Como hacer que con un solo dato se actualicen varias cosas a la vez?

Por ejemplo, si tengo un texto que dice "Barcelona" automaticamente (por ejemplo arriba de este texto va una imagen) busque en la carpeta del directorio el logo "barcelona" con minúsculas.

Me comentaron que con JQuery y con eventos se puede hacer, pero no encontré mucho sobre esto, y tampoco me doy cuenta si es esto que me dijeron.

<!DOCTYPE html>
<html>
	<head>
		<title>EJEM</title>
	</head>
	<body>
		<img id="teamLogo" src="">
		<span id="teamName"></span>
		<button id="backward">ATRAS</button><button id="fordward">ADELANTE</button>
		<span id="teamIndex" hidden="true">0</span>

		<script type="text/javascript">
			function changeTeam (team,logoURL){
				document.getElementById('teamName').innerText = team;

			}
			function initializer(){
				var TeamNames =['Barcelona', 'Real Madrid'];
				var TeamLogos =[]
				var teamIndex = 0;
				document.getElementById('backward').onclick = function(){
					if(teamIndex > 0){
						teamIndex = teamIndex-1;
					}
					changeTeam(TeamNames[teamIndex], 0);
				};
				document.getElementById('fordward').onclick = function(){
					if (teamIndex < TeamNames.lenght - 1) {
						teamIndex = teamIndex+1;
					}
					changeTeam(TeamNames[teamIndex], 0);
				}

				changeTeam(TeamNames[0], 0);
			}
			window.onload = initializer;
		</script>
	</body>
</html>

Muchas gracias.

1 respuesta 1

1

Ya lo tienes prácticamente hecho. El código que tienes ya está preparado para hacer el cambio de logo. Ahora mismo no lo hace porque le estás pasando 0 siempre como segundo parámetro a la función changeTeam(). Además tienes un error tipográfico. En el if del evento click del botón ADELANTE pone lenght cuando debería ser length.

Te dejo aquí el código funcionando (las imágenes están cargadas de internet pero en el array de TeamLogos tendrías que poner la ruta relativa a tus imágenes.

Por cierto, ese código ya utiliza eventos (onclick):

<!DOCTYPE html>
<html>
	<head>
		<title>EJEM</title>
	</head>
	<body>
		<img id="teamLogo" src="">
		<span id="teamName"></span>
		<button id="backward">ATRAS</button><button id="fordward">ADELANTE</button>
		<span id="teamIndex" hidden="true">0</span>

		<script type="text/javascript">
			function changeTeam (team,logoURL){
				document.getElementById('teamName').innerText = team;
        document.getElementById('teamLogo').src = logoURL;
			}
			function initializer(){
				var TeamNames =['Barcelona', 'Real Madrid'];
				var TeamLogos =['https://www.barcelona.de/images/fc-barcelona/128-logo-fc-barcelona-small.jpg','https://es.futbol24.com/upload/team/Spain/Real-Madrid.png']
				var teamIndex = 0;
				document.getElementById('backward').onclick = function(){
					if(teamIndex > 0){
						teamIndex = teamIndex-1;            
					}
					changeTeam(TeamNames[teamIndex], TeamLogos[teamIndex]);
				};
				document.getElementById('fordward').onclick = function(){
					if (teamIndex < TeamNames.length - 1) {
						teamIndex = teamIndex+1;
					}
					changeTeam(TeamNames[teamIndex], TeamLogos[teamIndex]);
				}

				changeTeam(TeamNames[0], TeamLogos[0]);
			}
			window.onload = initializer;
		</script>
	</body>
</html>

7
  • Gracias, pero esto es muy manual no? o ya si dice "Barcelona" aparece por ejemplo: "imagenes.com/barcelona.png"
    – MatiPHP
    el 4 dic. 2018 a las 3:57
  • Y otra cosa, como lo uso en html eso? Por ejemplo si quiero que la ruta de la img este adentro de un class="" de una etiqueta
    – MatiPHP
    el 4 dic. 2018 a las 4:01
  • No me sirve de nada, porque si yo quiero poner <h2>BARCELONA</h2><img src="ruta.com/barcelona.png"> y "barcelona" ya lo haya programado en javascript, pero que funcione en HTML
    – MatiPHP
    el 4 dic. 2018 a las 4:37
  • Por partes: 1.- De manual no tiene mucho. Simplemente tienes que definir la ruta de tus imágenes en el array TeamLogos, el resto es automático. 2.- ¿A qué te refieres con "cómo lo uso en html, eso?" 3.- ¿Qué quieres decir con "'barcelona', ya lo haya programado en javascript, pero que funcione en HTML"? Con mis todos mis respetos, no te estás explicando nada bien.
    – Kiko_L
    el 4 dic. 2018 a las 7:18
  • Si, perdón que no me expliqué, voy a tratar de hacerlo ahora: - Eso ya esta todo programado en JS, la imagen se muestra a travez del mismo codigo de js no? Primero quiero que se muestre mediante las etiquetas de html. - Una vez esté esto, quiero hacer por ejemplo un <div> <h1>Barcelona</h1> <img src="ruta.com/barcelona.png"></div> con ese ejemplo quiero que adentro del div ponga un texto, por ejemplo "Barcelona" y que en la ruta "ruta.com/ 'codigojs' " agregue automaticamente "barcelona". Espero que se haya entendido un poco mejor
    – MatiPHP
    el 4 dic. 2018 a las 14:21

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.