Barre de recherche de mots clés dans une page web

Bonjour je suis débutant en javascript, depuis deux jours je bloque . je veux réaliser une barre de recherche qui recherche les mots dans ma page, je veux que quand je clique sur l'icone recherche et aussi quand je clique sur la touche entrer du clavier on retrouve le mot dans la page. SVP aidez moi. Merci d'avance

voici l'html

[#black][code=html]

<div id="block-contenu">

<div class="blockgauche">
<div id="block1">
<a href="Plus-ou-moins-game.html"><h1>P1 : Programmez le jeu plus ou moins(Android)</h1></a>
<a href="Plus-ou-moins-game.html"><img src="imag/image1.png" ></a><span>Qu’est-ce que Python? Python a récemment créé un émoi dans le secteur informatique mondial. Maintenant, ce n’est pas un nouveau langage, il a été développé après 1991. Récemment, Python est ...</span>
<br><br><br>
<div id="suite1"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>
</div>
<div id="block2">
<a href="Plus-ou-moins-game.html"><h1>P2: Programmez le jeu du morpion (Android)</h1></a>
<a href="Plus-ou-moins-game.html"><img src="imag/image2.png" width="275px" height="183"></a><span>Il s’agit de l’un des tout nouveaux titres de poste que les gens utilisent actuellement. Qu’il s’agisse de Facebook ou de Linkedin, étudiants et professionnels...</span>
<br><br><br>

<div id="suite2"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>

</div>
<div id="block3">
<a href="Plus-ou-moins-game.htmlPlus-ou-moins-game.html"><h1>P3 : Programmez le jeu de mémoire (Android)</h1></a>
<a href="Plus-ou-moins-game.html"><img src="imag/images3.png" ></a><span>Python est l’un des langages de programmation les plus populaires et est connu pour sa syntaxe simple et sa vaste collection de bibliothèques. Il aide les développeurs </span>
<br><br><br>

<div id="suite3"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>

</div>
<div id="block4">
<a href="Plus-ou-moins-game.html"><h1>P4 : Programmez un QCM (Android)<br><br></h1></a>
<a href="Plus-ou-moins-game.html"><img src="imag/image7.png" ></a><span>Rencontrer des gens en ligne semblait être une idée pas mal et sans risque de sécurité il n’y a pas si longtemps, car nous discutions avec eux dans des salons ...</span>
<br><br><br>

<div id="suite4"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>

</div>
<div id="block5">
<a href="Plus-ou-moins-game.html"><h1>P5 : Programmez un password finder Instagram (Android)</h1></a>
<a href="Plus-ou-moins-game.html"><img src="imag/images4.png" ></a><span>8 choses à savoir avant d’apprendre la programmation 1- Il n’y a pas un moyen parfait pour apprendre Certains disent, regardez des tutoriels sur YouTube. D’autres pourraient dire, lisez ces ...</span>
<br><br><br>

<div id="suite5"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>

</div>
<div id="block6">
<a href="Plus-ou-moins-game.html"><h1>P6 : Programmez un texteur de Qi (Android)</h1></a>
<a href="Plus-ou-moins-game.html"><img src="imag/images10.png" width="275px" height="183px" ></a><span>Si vous souhaitez apprendre à coder, faire ses premiers pas dans cet immense univers peut sembler une tâche difficile, voire intimidante. Voici le grand secret: vous pouvez utiliser de nombreuses ...</span>
<br><br><br>

<div id="suite6"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>

</div>
</div>[/code]
Modifié par Sam12 (30 Dec 2019 - 12:28)

    <div id="block-contenu">
    		
		<div class="blockgauche">
		<div id="block1">
					<a href="Plus-ou-moins-game.html"><h1>P1 : Programmez le jeu plus ou moins(Android)</h1></a>
					<a href="Plus-ou-moins-game.html"><img src="imag/image1.png" ></a><span>Qu’est-ce que Python? Python a récemment créé un émoi dans le secteur informatique mondial. Maintenant, ce n’est pas un nouveau langage, il a été développé après 1991. Récemment, Python est ...</span>		
					<br><br><br>																		
					<div id="suite1"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>											
		</div>
		<div id="block2">
					<a href="Plus-ou-moins-game.html"><h1>P2: Programmez le jeu du morpion (Android)</h1></a>
					<a href="Plus-ou-moins-game.html"><img src="imag/image2.png"  width="275px" height="183"></a><span>Il s’agit de l’un des tout nouveaux titres de poste que les gens utilisent actuellement. Qu’il s’agisse de Facebook ou de Linkedin, étudiants et professionnels...</span>		
					<br><br><br>
																			
					<div id="suite2"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>	

		</div>	
		<div id="block3">
					<a href="Plus-ou-moins-game.htmlPlus-ou-moins-game.html"><h1>P3 : Programmez le jeu de mémoire (Android)</h1></a>
					<a href="Plus-ou-moins-game.html"><img src="imag/images3.png" ></a><span>Python est l’un des langages de programmation les plus populaires et est connu pour sa syntaxe simple et sa vaste collection de bibliothèques. Il aide les développeurs </span>		
					<br><br><br>
																			
					<div id="suite3"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>	
					
		</div>			
		<div id="block4">
					<a href="Plus-ou-moins-game.html"><h1>P4 : Programmez un QCM (Android)<br><br></h1></a>
					<a href="Plus-ou-moins-game.html"><img src="imag/image7.png" ></a><span>Rencontrer des gens en ligne semblait être une idée pas mal et sans risque de sécurité il n’y a pas si longtemps, car nous discutions avec eux dans des salons ...</span>		
					<br><br><br>
																			
					<div id="suite4"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>	
					
		</div>	
		<div id="block5">
					<a href="Plus-ou-moins-game.html"><h1>P5 : Programmez un password finder Instagram (Android)</h1></a>
					<a href="Plus-ou-moins-game.html"><img src="imag/images4.png" ></a><span>8 choses à savoir avant d’apprendre la programmation 1- Il n’y a pas un moyen parfait pour apprendre Certains disent, regardez des tutoriels sur YouTube. D’autres pourraient dire, lisez ces ...</span>		
					<br><br><br>
																			
					<div id="suite5"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>	
					
		</div>	
		<div id="block6">
					<a href="Plus-ou-moins-game.html"><h1>P6 : Programmez un texteur de Qi (Android)</h1></a>
					<a href="Plus-ou-moins-game.html"><img src="imag/images10.png" width="275px" height="183px" ></a><span>Si vous souhaitez apprendre à coder, faire ses premiers pas dans cet immense univers peut sembler une tâche difficile, voire intimidante. Voici le grand secret: vous pouvez utiliser de nombreuses ...</span>		
					<br><br><br>
																			
					<div id="suite6"><a href="Plus-ou-moins-game.html">Lire la suite...</a></div>	
					
		</div>	
</div>

function recherche(argument) {
var s= document.getElementById('recherchemot');
var st=document.getElementById('block-contenu');
for (i = 0; i < st.length; i++) {
if(s.toUppercase()!=null && s.toUppercase()!="" && st.textContent.toUppercase().indexOf(s.toUppercase()) == -1) {

}
else $(st[i]).show();
}

};

[/i]

function recherche(argument) {
	var s= document.getElementById('recherchemot');
	var st=document.getElementById('block-contenu');
	for (i = 0; i < st.length; i++) {
		if(s.toUppercase()!=null && s.toUppercase()!="" && st[i].textContent.toUppercase().indexOf(s.toUppercase()) == -1) {

		}
		else $(st[i]).show();
	}

};

Modifié par Sam12 (30 Dec 2019 - 12:54)