tableau et DOM

Autodescriptif

Dans le code ci-dessous, écrire un script pour qu'un clic sur le bouton remplace les chiffres des éléments span par le compte actuel.

Par exemple, la table compte actuellement 11 zéros, le premier span devra donc indiquer 11 après un clic. De même le second span devra indiquer 1 puisque pour le moment il n'y a qu'un seul 1 dans l'élément table.

Bien sûr, après un clic, le nombre de zéros ne sera plus que de 1. Un second clic devra donc afficher cela.

Après avoir écrit le script, expérimentez : combien de clics sont nécessaires avant stabilisation ? (c'est à dire avant qu' un nouveau clic ne change rien dans l'élément table).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Autodécrit  </title>
        <style>
			button{background-color : #ccc;}
			table{ border: 1px solid black;}
        </style>
    </head>
    
    <body>
    
     <table>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 0.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 1.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 2.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 3.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 4.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 5.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 6.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 7.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 8.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 9.</td></tr>
     </table>
	 
	
 
    
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
     
    
    
    <script>
	   
    </script> 
     
    </body>
</html>

Aide - créer des tableaux d'éléments

On peut créer un tableau des éléments span et un tableau des éléments td comme suit :

   
    <script>
	
	let lignes = document.getElementsByTagName("td");
	
	let placesCompteurs = document.getElementsByTagName("span");
 
    </script>

Aide - décomposer

Commencer par écrire une fonction compte(caractere) qui retournera le nombre de caractères "caractere" présents dans l'élément table.
Écrire ensuite la fonction maj() qui va compter le nombre d'occurrences de chacun des chiffres (qui devront plutôt être comptés comme caractère) puis mettra à jour les éléments span.


    <script>
	
	let lignes = document.getElementsByTagName("td");
	
	let placesCompteurs = document.getElementsByTagName("span");
 
 
	function compte(carac){
		/* compte le nombre de caractères carac dans la table */
		let compteur = 0;
		 
		return compteur;
	}
	
	
    
    function maj(){
		 
    }
    </script>

Une solution

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Autodécrit  </title>
        <style>
			button{background-color : #ccc;}
			table{ border: 1px solid black;}
        </style>
    </head>
     
    <body>
    
     <table>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 0.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 1.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 2.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 3.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 4.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 5.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 6.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 7.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 8.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 9.</td></tr>
     </table>
	 
	
 
    
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
     
    
    
    <script>
	
	let lignes = document.getElementsByTagName("td");
	
	let placesCompteurs = document.getElementsByTagName("span");
	
    
    function compte(carac){
		/* compte le nombre de caractères carac dans la table */
		let compteur = 0;
		let chaine = '';
		
		// chaine contiendra l'ensemble des lignes de l'élément table :
		for(let i = 0; i < lignes.length; i++){
			chaine += lignes[i].innerHTML;
		}
		
		//on compte maintenant le nombre de caractères carac dans les lignes :
		for(let i = 0; i < chaine.length; i++){
			if(chaine[i] == carac) {compteur++;}
		}
		return compteur;
	}
	
	
	
    
    function maj(){
		/* fonction de mise à jour des compteurs dans les lignes. */
		let compteChiffres = [];
		for(let i = 0; i < 10; i++){
			compteChiffres.push(compte(''+i));
		}
		 
		for(let i = 0; i < placesCompteurs.length; i++){
			placesCompteurs[i].innerHTML = compteChiffres[i];
		} 
    }
        
    </script> 
     
    </body>
</html>

Une solution, bis

On peut choisir de ne mettre qu'un seul compteur à jour à la fois.

On constate ici que ce choix mène à une autre solution.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Autodécrit  </title>
        <style>
			button{background-color : #ccc;}
			table{ border: 1px solid black;}
        </style>
    </head>
     
    <body>
    
     <table>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 0.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 1.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 2.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 3.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 4.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 5.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 6.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 7.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 8.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 9.</td></tr>
     </table>
	 
	
 
    
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
     
    
    
    <script>
	
	let lignes = document.getElementsByTagName("td");
	
	let placesCompteurs = document.getElementsByTagName("span");
	
    
    function compte(carac){
		/* compte le nombre de caractères carac dans la table */
		let compteur = 0;
		let chaine = '';
		
		// chaine contiendra l'ensemble des lignes de l'élément table :
		for(let i = 0; i < lignes.length; i++){
			chaine += lignes[i].innerHTML;
		}
		
		//on compte maintenant le nombre de caractères carac dans les lignes :
		for(let i = 0; i < chaine.length; i++){
			if(chaine[i] == carac) {compteur++;}
		}
		return compteur;
	}
	
	
	
    
    function maj(){
		/* fonction de mise à jour des compteurs dans les lignes. */
		
		for(let i = 0; i < placesCompteurs.length; i++){
			placesCompteurs[i].innerHTML = compte(''+i);
		} 
    }
        
    </script> 
     
    </body>
</html>

Une solution, ter

Comme dans la solution précédente, on choisit de ne mettre qu'un seul compteur à jour à la fois, mais l'ordre dans lequel les mises à jour se font est aléatoire.

On utilise la fonction EntierAuHasardEntreBornes(a,b) de la page de cours sur le hasard en js.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Autodécrit  </title>
        <style>
			button{background-color : #ccc;}
			table{ border: 1px solid black;}
        </style>
    </head>
     
    <body>
    
     <table>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 0.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 1.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 2.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 3.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 4.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 5.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 6.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 7.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 8.</td></tr>
		<tr><td>Ce tableau contient <span>0</span> fois le chiffre 9.</td></tr>
     </table>
	 
	
 
    
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
     
    
    
    <script>
	
	let lignes = document.getElementsByTagName("td");
	
	let placesCompteurs = document.getElementsByTagName("span");
	
    
    function compte(carac){
		/* compte le nombre de caractères carac dans la table */
		let compteur = 0;
		let chaine = '';
		
		// chaine contiendra l'ensemble des lignes de l'élément table :
		for(let i = 0; i < lignes.length; i++){
			chaine += lignes[i].innerHTML;
		}
		
		//on compte maintenant le nombre de caractères carac dans les lignes :
		for(let i = 0; i < chaine.length; i++){
			if(chaine[i] == carac) {compteur++;}
		}
		return compteur;
	}
	
	function  entierAuHasardEntreBornes(a,b) {
			// a et b sont   entiers
			// retourne un entier entre a et b, bornes comprises
			return Math.floor( (b-a+1) * Math.random() ) + a;
	} 
	
	function echange(L, i, j) {
		/* L est de type array.
		La fonction échange les éléments d'indice i et j */
		let aux = L[i];
		L[i] = L[j];
		L[j] = aux;
	}
	
	function melange(L) {
		/* L est de type array, la fonction mélange son contenu*/
		let lg = L.length;
		for(let i = 0; i < lg; i++){
			let j = entierAuHasardEntreBornes(0,lg-1);
			echange(L, i, j);
		}
	}
	
    
    function maj(){
		/* fonction de mise à jour des compteurs dans les lignes. */
		let L = [];
		for(let i = 0; i < placesCompteurs.length; i++) {
			L.push(i);
		}
		melange(L);

		for(let i of L){
			placesCompteurs[i].innerHTML = compte(''+i);
		} 
    }
        
    </script> 
     
    </body>
</html>

Autodescriptif (2)

Même problème que le précédent, mais avec le tableau restreint ci-dessous.

Cliquez ensuite jusqu'à ce que les phrases soient correctes.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Autodécrit  </title>
        <style>
        button{background-color : #ccc;}
        table{ border: 1px solid black;}
        </style>
    </head>
    
    <body>
    
     <table>
		 
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 1.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 2.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 3.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 4.</td></tr>
		 
     </table>
	 
    
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
    <script>
	   
    </script> 
     
    </body>
</html>

Aide

Si vous avez besoin d'une aide ici, c'est que vous n'avez pas assez travaillé l'exercice précédent !

Une solution

On reprend le code de la solution de l'exercice précédent quasi à l'identique.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Autodécrit  </title>
        <style>
			button{background-color : #ccc;}
			table{ border: 1px solid black;}
        </style>
    </head>
     
    <body>
    
     <table>
		 
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 1.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 2.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 3.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 4.</td></tr>
		 
     </table>
	 
	
 
    
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
     
    
    
    <script>
	
	let chiffres = document.getElementsByTagName("td");
	
	let placesCompteurs = document.getElementsByTagName("span");
	
    
    function compte(carac){
		/* compte le nombre de caractères carac dans la table */
		let compteur = 0;
		let chaine = '';
		
		for(let i = 0; i < chiffres.length; i++){
			chaine += chiffres[i].innerHTML;
		}
		 
		for(let i = 0; i < chaine.length; i++){
			if(chaine[i] == carac) {compteur++;}
		}
		return compteur;
	}
	
	
	
    
    function maj(){
		
		let compteChiffres = [];
		for(let i = 1; i <= 4; i++){
			compteChiffres.push(compte(''+i));
		}
		 
		for(let i = 0; i < placesCompteurs.length; i++){
			placesCompteurs[i].innerHTML = compteChiffres[i];
		}
		
		 
    }
        
    </script> 
     
    </body>
</html>

Autodescriptif (3)

On reprend le problème précédent.

Écrire une version pour laquelle les itérations jusqu'à des phrases correctes se fassent seules.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Autodécrit  </title>
        <style>
        button{background-color : #ccc;}
        table{ border: 1px solid black;}
        </style>
    </head>
     
    <body>
    
     <table>
		 
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 1.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 2.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 3.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 4.</td></tr>
		 
     </table>
	 
	
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
    <script>
	   
    </script> 
     
    </body>
</html>

Aide

Ajoutez une boucle while au code de la solution de l'exercice précédent.

Itérations automatiques

On relance la fonction tant qu'il y a des modifications dans le tableau.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Autodécrit  </title>
        <style>
			button{background-color : #ccc;}
			table{ border: 1px solid black;}
        </style>
    </head>
    
    <body>
    
     <table>
		 
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 1.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 2.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 3.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 4.</td></tr>
		 
     </table>
	 
	
 
    
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
     
    
    
    <script>
	
	let chiffres = document.getElementsByTagName("td");
	
	let placesCompteurs = document.getElementsByTagName("span");
	
    
    function compte(carac){
		/* compte le nombre de caractères carac dans la table */
		let compteur = 0;
		let chaine = '';
		
		for(let i = 0; i < chiffres.length; i++){
			chaine += chiffres[i].innerHTML;
		}
		 
		for(let i = 0; i < chaine.length; i++){
			if(chaine[i] == carac) {compteur++;}
		}
		return compteur;
	}
	
	
	
    
    function maj(){
		
		let compteChiffres = [];
		let changement = true;
		let old = 0;
		
		
		for(let i = 1; i <= 4; i++){
			compteChiffres.push(compte(''+i));
		}
		
		
		
		while(changement){
			
			for(let i = 0; i < placesCompteurs.length; i++){
				placesCompteurs[i].innerHTML = compteChiffres[i];
			}
			
			changement = false;
			
			for(let i = 0; i < compteChiffres.length; i++){
				old = compteChiffres[i];
				compteChiffres[i] = compte(''+(i+1));
				if (old !== compteChiffres[i]){changement = true;}
				
			}
			
			 
		}
		 
    }
        
    </script> 
     
    </body>
</html>

Autodescriptif (4)

On reprend le problème précédent avec la version pour laquelle les itérations jusqu'à des phrases correctes se fassent seules.

On aimerait avoir le temps de voir les phases intermédiaires. Il s'agit donc de laisser un temps de deux ou trois secondes entre deux changements.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Autodécrit  </title>
        <style>
        button{background-color : #ccc;}
        table{ border: 1px solid black;}
        </style>
    </head>
    
    <body>
    
     <table>
		 
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 1.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 2.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 3.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 4.</td></tr>
		 
     </table>
	 
	
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
    <script>
	   
    </script> 
     
    </body>
</html>

Aide

Travailler au préalable cette page sur les deux fonctions javascript setInterval() et clearInterval().

Une solution

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Autodécrit  </title>
        <style>
			button{background-color : #ccc;}
			table{ border: 1px solid black;}
        </style>
    </head>
    
    <body>
    
     <table>
		 
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 1.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 2.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 3.</td></tr>
		<tr><td>Ce tableau contient <span>...</span> fois le chiffre 4.</td></tr>
		 
     </table>
	 
	
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
    
    <script>
	
	let chiffres = document.getElementsByTagName("td");
	let placesCompteurs = document.getElementsByTagName("span");
	
    
    function compte(carac){
		/* compte le nombre de caractères carac dans la table */
		let compteur = 0;
		let chaine = '';
		
		for(let i = 0; i < chiffres.length; i++){
			chaine += chiffres[i].innerHTML;
		}
		 
		for(let i = 0; i < chaine.length; i++){
			if(chaine[i] == carac) {compteur++;}
		}
		return compteur;
	}
 
 
	
    
    function maj(){
		
		let compteChiffres = [];
		let changement = true;
		let old = 0;
	 
		for(let i = 1; i <= 4; i++){
			compteChiffres.push(compte(''+i));
		}
	
		let evolution = setInterval( modif, 2000);
			
		function modif(){
				if(changement){
					for(let i = 0; i < placesCompteurs.length; i++){
						placesCompteurs[i].innerHTML = compteChiffres[i];
					}
					changement = false;
					for(let i = 0; i < compteChiffres.length; i++){
						old = compteChiffres[i];
						compteChiffres[i] = compte(''+(i+1));
						if (old !== compteChiffres[i]){changement = true;}	
					} 
				}
				else{
					 clearInterval(evolution);
				}
				
			 }// fin de la fonction modif  
	}
    
 
    </script> 
     
    </body>
</html>

Description mutuelle

Nous avons maintenant deux cadres. Chacun compte le nombre de chiffres entre 0 et 5 de l'autre cadre.

Écrire en premier lieu une fonction qui remplace les pointillés par des entiers entre 0 et 5 choisis au hasard.
Écrire ensuite une fonction de mise à jour : chaque clic sur le bouton devra faire en sorte que l'affichage décrira la situation avant le clic.

Ensuite, cliquez à nouveau jusqu'à stabilisation... Attention, la stabilisation peut être ici un "cycle".

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  description mutuelle  </title>
        <style>
			button{background-color : #ccc;}
			table{ border: 1px solid black;}
			#lesCadres{-moz-column-count : 2; margin-bottom: 10px;}
        </style>
    </head>
    
    <body>
		
		
		
    <article id="lesCadres">
		
		 
		 <table id="obiwan">
			<caption>Cadre Obi-Wan</caption>
			<tr><th>Dans le cadre Yoda, il y a : </th></tr>
			<tr><td>  <span>...</span> fois le chiffre 0.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 1.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 2.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 3.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 4.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 5.</td></tr>
		 </table>
		 
		 
		 
		 <table id="yoda">
			<caption>Cadre Yoda</caption>
			<tr><th>Dans le cadre Obi-Wan, il y a : </th></tr>
			<tr><td>  <span>...</span> fois le chiffre 0.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 1.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 2.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 3.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 4.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 5.</td></tr>
		 </table>
		 
	 </article>
	
 
    
     <button id="clic" onclick="maj()">Clic ! </button>
    
   
    <script>
	 
    </script> 
     
    </body>
</html>

Aide - entier au hasard

Pour tirer un entier au hasard, consulter cette page.

Une solution

Une solution :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  description mutuelle  </title>
        <style>
			button{background-color : #ccc;}
			table{ border: 1px solid black;}
			#lesCadres{-moz-column-count : 2; margin-bottom: 10px;}
        </style>
    </head>
    
    <body>
		
		
		
    <article id="lesCadres">
		
		 
		 <table id="obiwan">
			<caption>Cadre Obi-Wan</caption>
			<tr><th>Dans le cadre Yoda, il y a : </th></tr>
			<tr><td>  <span>...</span> fois le chiffre 0.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 1.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 2.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 3.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 4.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 5.</td></tr>
		 </table>
		 
		 
		 
		 <table id="yoda">
			<caption>Cadre Yoda</caption>
			<tr><th>Dans le cadre Obi-Wan, il y a : </th></tr>
			<tr><td>  <span>...</span> fois le chiffre 0.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 1.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 2.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 3.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 4.</td></tr>
			<tr><td>  <span>...</span> fois le chiffre 5.</td></tr>
		 </table>
		 
	 </article>
	
 
    
     <button id="clic" onclick="maj()">Clic ! </button>
    
    
     
    
    
    <script>
		
	let obiwan = document.getElementById("obiwan");
	let yoda =  document.getElementById("yoda");
	
	let lignesObiwan = obiwan.getElementsByTagName("td");
	let lignesYoda = yoda.getElementsByTagName("td");
	
	let compteursObiwan = obiwan.getElementsByTagName("span");
	let compteursYoda = yoda.getElementsByTagName("span");
	
    
    function compte(carac, cadre){
		/* compte le nombre de caractères carac dans la table cadre*/
		let compteur = 0;
		let chaine = '';
		let lignes;
		
		
		if(cadre == "yoda"){
			lignes = lignesYoda;
		}
		else{
			lignes = lignesObiwan;
		}
		
		
		for(let i = 0; i < lignes.length; i++){
			chaine += lignes[i].innerHTML;
		}
		 
		for(let i = 0; i < chaine.length; i++){
			if(chaine[i] == carac) {compteur++;}
		}
		return compteur;
	}
	
	
	
	function intialiseHasard(){
		for(let i = 0; i < compteursObiwan.length; i++){
			compteursYoda[i].innerHTML =  Math.floor(Math.random() * 6);
			compteursObiwan[i].innerHTML =  Math.floor(Math.random() * 6);			
		} 
	}
	
	
	intialiseHasard();
    
    function maj(){
		 
		let compteChiffresYoda = [];
		let compteChiffresObiwan = [];
		
		for(let i = 0; i < 10; i++){
			compteChiffresYoda.push( compte(''+i , "yoda") );
		}
		
		for(let i = 0; i < 10; i++){
			compteChiffresObiwan.push( compte(''+i , "obiwan") );
		}
		 
		for(let i = 0; i < compteursObiwan.length; i++){
			compteursYoda[i].innerHTML = compteChiffresObiwan[i];
			compteursObiwan[i].innerHTML = compteChiffresYoda[i];			
		} 
    }
        
    </script> 
     
    </body>
</html>