How to make several things update at once in JavaScript part 2 with a single data

Question

How to make several things update at once in JavaScript part 2 with a single data

Navigation

#1 by (1 votes)

0

good day.
My question is: How to make several things update at the same time with a single data?

For example, if I have a text that says "Barcelona" automatically (for example, an image appears above this text) look in the folder of the directory for the "barcelona" logo with lowercase letters.

They told me that with JQuery and with events it can be done, but I did not find much about this, and I do not realize if this is what they told me.

<!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>

Thank you very much.

javascript html

asked by MatiPHP 01.12.2018 в 01:18

source

1 answer

Problems with textarea Url AJAX variables

score 1 · Accepted Answer

You already have it practically done. The code you have is already ready to make the logo change. Right now it does not because you are passing it 0 always as the second parameter to the changeTeam() function. You also have a typo. In if of event click of FORWARD button sets lenght when it should be length .

I leave here the code working (the images are loaded from the internet but in the array of TeamLogos you should put the path relative to your images.

By the way, that code already uses events ( 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>