5568 sujets

Sémantique web et HTML

Interagir avec un fichier pour remplir automatiquement des informatios

Bonsoir à tous je suis en train de créer une petite application web qui servira pour un jeu de simulation.

Voici la partie de code actuel 

<div class="col">
  <div class="vl">40</div>
  <div class="pk">80</div>
  <div class="vr">VL</div>
  <div class="etab"><div class="nom">gare 1</div><div class="nom">Passage</div>
  <div class="icones"></div>
</div>
<div class="hora">07:41</div>
<div class="hora">07:22</div>
</div>


Je cherche un moyen de rendre plus simple la création des scénarios. avec un genre de "id" pour ensuite avoir un fichier dans le même dossier que mon index.html

<div class="col">
  <div class="vl">ID1</div>
  <div class="pk">ID2</div>
  <div class="vr">ID3</div>
  <div class="etab"><div class="nom">ID4</div><div class="nom">ID5</div>
  <div class="icones"></div>
</div>
<div class="hora">ID6</div>
<div class="hora">ID7</div>
</div>


dans mon fichier je souhaite avoir
ID1:40
ID2:80
ID3:VL
ID4:Gare 1
ID5:Passage
ID6:07:41
ID7:07:22

Mais je sais pas comment m’y prendre en HTML ou en PHP ou autre.

Merci pour votre aide précieuse.

Romain
Salut,

je te propose t'intégrer tes données directement dans le script, c'est beaucoup plus simple et tu pourras le modifier directement en JS.
D'abord il te faut un html de ce style, avec les id comme tu l'as presque fait:

<div class="col">

	<div class="vl" id="ID1"></div>
	<div class="pk" id="ID2"></div>
	<div class="vr" id="ID3"></div>
	
	<div class="etab">
		<div class="nom" id="ID4"></div>
		<div class="nom" id="ID5"></div>
		<div class="icones"></div>
	</div>
	
	<div class="hora" id="ID6"></div>
	<div class="hora" id="ID7"></div>
	
</div>


Ensuite un bout de JS comme ceci et c'est parti pour le game Smiley biggrin :

document.addEventListener('DOMContentLoaded', function () {

	const dataList = [

		[ "ID1", "40" ],
		[ "ID2", "80" ],
		[ "ID3", "VL" ],
		[ "ID4", "Gare 1" ],
		[ "ID5", "Passage" ],
		[ "ID6", "07:41" ],
		[ "ID7", "07:22" ]

	];

	for ( let i = 0; i < dataList.length; i++ ) {
	
		document.getElementById(dataList[i][0]).innerText = dataList[i][1];
	
	}

});


De cette façon c'est facilement optimisable !

Bien sur sinon tu peux aussi passer par PHP, tout dépend de la finalité.
Waouh ! Smiley biggrin

Super merci beaucoup c’est exactement ce que je souhaitais faire mais je savais pas comment m’y prendre avec quelle méthode.

Je vais essayer sur mon code entier voir si cela fonctionne ????.
Hello,

Pour faire suite à ton MP, tu peux travailler avec des CLASS plutôt que des ID, même fonctionnement mais bien entendu ça fait ce que tu demande, à savoir pouvoir réutiliser les valeurs. En gros tu place la CLASS où tu souhaites avoir le texte de ton tableau.
C'est tout Smiley smile

L'avantage des CLASS c'est que tu peux avoir plusieurs éléments avec la même, contrairement aux ID. Tu peux aussi, comme tu le vois, mettre plusieurs CLASS dans un élément et aussi concaténer plusieurs CLASS.
Voici donc un exemple de code, pratique pour écrire une chanson répétitive Smiley lol 


<!DOCTYPE html>
<html>

	<head>

		<script>

			document.addEventListener('DOMContentLoaded', function () {

				const dataList = [

					// CLASS , VALUE
					[ "CLASS_1", " And" ],
					[ "CLASS_2", " I will always love you" ],
					[ "CLASS_3", " You, you, my darling you" ],

				];

				for ( let i = 0; i < dataList.length; i++ ) {
				
					const divList = document.getElementsByClassName(dataList[i][0]);
					for ( let j = 0; j < divList.length; j++ ) divList[j].innerText += dataList[i][1];
				
				}

			});

		</script>

	</head>

	<body>

		<p>And aaaaaa iiii aaaaaa mdr</p>
		<div class="green middle CLASS_1"></div>
		<div class="blue CLASS_2"></div>
		<div class="yellow  CLASS_2"></div>
		<div class="red left CLASS_3"></div>
		<div class="orange CLASS_2"></div>
		<div class="brown  CLASS_2"></div>
		<div class="black right CLASS_3"></div>
		<div class="pink CLASS_2"></div>
		<div class="white  CLASS_2"></div>
		
		<p>Exemple de concaténation avec plusieurs CLASS</p>
		<div class="CLASS_1 CLASS_2 CLASS_3"></div>

	</body>

</html>
Sujet clos
Aller à