11521 sujets

JavaScript, DOM et API Web HTML5

Loop array javascript

Bonjour,

comment faire une boucle pour qu'elle passe dans le tableau et m'affiche les donnés au click elle m'affiche la donné suivante ?



let btn = document.querySelector('button');
btn.addEventListener('click', toto);
function toto() {
    const mon_tableau = ['hugo', 'toto', 'tata'];

    for (let i = 0; i < mon_tableau.length; i++) {
        console.log(mon_tableau[i]);
    }
}


je souhaiterais faire comme sur le site au click sur l'image elle m'affiche la suivante :
http://lelscanv.com/lecture-ligne-one-piece.php
Modérateur
Salut,

Pas besoin de la boucle du coup. c'est ton click qui incrémentera ta variable.
Il me semble aussi qu'il faut que tu mettes tes variables hors de la fonction si tu veux garder leur état (mais la je veux pas trop m'avancer j'ai fais ça rapidement).

const mon_tableau = ['hugo', 'toto', 'tata'];
let pagenumber = 0;
let test = document.getElementById('test');
test.addEventListener('click', next);
update()

function next() {
	if (pagenumber < mon_tableau.length - 1) {
		pagenumber ++;
  } else {
    pagenumber=0
  }
  update()
}
function update() {
	test.innerHTML = mon_tableau[pagenumber];
}

https://jsfiddle.net/undless/ayr6tovm/2/
Salut,

Si j'ai bien tout compris tu veux changer d'image au click et que cette image soit la suivante dans le tableau !

Donc voici une façon de procéder, n'hésites pas si tu as des questions:
(le style c'est pas important ici)

<!DOCTYPE html>
<html>

	<head>

		<style>
		
			body {
				margin: 0;
				padding: 0;
				background-color: black;
			}
			
			.middle {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			
			#image {
				width: 200px;
				border-radius: 5px;
			}
			
			#image:hover {
				cursor: pointer;
				border: solid 1px grey;
			}

		</style>
		
		<script>
		
			// Au chargement du document
			document.addEventListener('DOMContentLoaded', function(){

				// on initialise l'image à la N°1 ( variable globale sorry )
				global_VueImg = 1;
				// On va charger la première image
				getNextImage();
				// on va chercher notre élément image
				const thisImageElement = document.getElementById("image");
				// On ajoute un évenement click dessus
				thisImageElement.addEventListener('click', getNextImage);
				
			});
		
			const getNextImage = function () {

				// on va chercher notre élément image
				const thisImageElement = document.getElementById("image");
				// on va récupérer notre tableau d'images
				const imagesArray = getImagesArray();
				// ici le nombres d'images
				const nbMaxImages = imagesArray.length - 1;
				// chargement de l'image selon global_VueImg
				thisImageElement.src = imagesArray[global_VueImg][1];
				// si on arrive à la dernière image on recommance depuis le début
				global_VueImg < nbMaxImages ? global_VueImg++ : global_VueImg = 1;
				
			};
			
			// fonction pour récupérer le tableau d'images
			const getImagesArray = function () {

				const ImagesArray = [
					[0, 'http://img110.xooimage.com/files/1/4/3/bucky-5645c96.png'],
					[1, 'http://img110.xooimage.com/files/1/d/a/captain-5645c9b.png'],
					[2, 'http://img110.xooimage.com/files/8/f/1/drax-5645c9c.png'],
					[3, 'http://img110.xooimage.com/files/7/9/8/falcon-5645c9f.png'],
					[4, 'http://img110.xooimage.com/files/1/2/a/gamora-5645ca0.png'],
					[5, 'http://img110.xooimage.com/files/3/b/f/groot-5645ca1.png'],
					[6, 'http://img110.xooimage.com/files/6/7/0/hulk-5645ca2.png'],
					[7, 'http://img110.xooimage.com/files/9/4/d/iron-5645ca5.png'],
					[8, 'http://img110.xooimage.com/files/f/7/c/mantis-5645ca8.png'],
					[9, 'http://img110.xooimage.com/files/c/3/1/rocket-5645ca9.png'],
					[10, 'http://img110.xooimage.com/files/4/9/c/spider-5645caa.png'],
					[11, 'http://img110.xooimage.com/files/7/9/d/star-5645cab.png'],
					[12, 'http://img110.xooimage.com/files/0/e/b/strange-5645cac.png'],
					[13, 'http://img110.xooimage.com/files/6/f/c/thor-5645cad.png'],
					[14, 'http://img110.xooimage.com/files/7/7/1/vision-5645cb0.png'],
					[15, 'http://img110.xooimage.com/files/8/a/7/war-5645cb1.png'],
					[16, 'http://img110.xooimage.com/files/c/7/3/widow-5645cb4.png'],
					[17, 'http://img110.xooimage.com/files/5/4/f/witch-5645cb5.png']
				];
				
				return ImagesArray;
			
			};
			
		</script>

	</head>

	<body>
	
		<img id="image" class="middle"/>
		
	</body>
	
</html>
Sujet clos
Aller à