[Résolu] Javascript intègre un élément dans le HTML... mais rien ne s'

Bonjour à toutes et à tous,

J'ai un problème avec JS et je ne l'ai pas vu ailleurs sur le forum aussi, je me permets de poser ma questions ici.

D'abord, je précise que je suis super méga débutant en javascript
Mon objectif est le suivant :

j'ai un fichier HTML qui contient plusieurs listes à puces situées au dessus de plusieurs blocs renvoyant à ces mêmes listes. Je souhaite afficher une fenêtre de rappel sur le côté qui reprends les listes à puces correspondant à chaque partie de mon article.

Exemple:

pour une recette de tiramisu, vous avez une liste d'ingrédients pour le biscuit, une autre pour la crème et je souhaite que les ingrédients du biscuit soient rappelés à côté du bloc biscuit et de même pour la crème.
Pour cela je crée mes listes d'ingrédients en HTML de la manière suivante :

<div id="liste_ing">
					<div class="sous_liste" id="ing_partie01">
						<h3>Le biscuit</h3>
						<ul>
							<li>beurre</li>
							<li>œuf</li>
							<li>lait</li>
							<li>farine</li>
						</ul>
					</div>
					<div class="sous_liste" id="ing_partie02">
						<h3>LA crème</h3>
						<ul>
							<li>Chocolat</li>
							<li>noisette</li>
							<li>café</li>
							<li>yuzu</li>
	</ul>
					</div>

Ensuite, je crée un bloc qui me servira à faire le rappel des ingrédients :

<div id="blocRappel" class="containerLeft">
		<div id="rappelIngredients">
			 <div id="rappelContainer"></div>
		</div>
	</div>

Ensuite, en JS, je rentre mes variables :

let ing_partie01 = document.getElementById ("ing_partie01");
let ing_partie02 = document.getElementById ("ing_partie02");
let ing_partie03 = document.getElementById ("ing_partie03");
let blocRappel = document.getElementById ("blocRappel");
let rappelContainer = document.getElementById ("rappelContainer");
let rappelIngredients = document.getElementById ("rappelIngredients");

suivies de mon code :

rappelContainer.innerHTMl =ing_partie01;

Et là, rien ne s'affiche dans ma

<div id="rappelContainer"></div>

alors que si je rajoute un

console.log(rappelContainer.innerHTMl);

,la liste à puce s'affiche bien dans la console du navigateur...

Du coup, je suis un peu perdu.

J'espère avoir été clair et je vous remercie toutes et tous de prendre le temps de réfléchir à ma requête. Bonne journée/soirée et à très vite !

Hello et bienvenue sur le forum,

@gcyrillus : +1 (bien vu pour le innerHTML !)

@romain_le_renard : Bien que ta sémantique soit vraiment pas mal, j'ai quelques retours à te faire :
- à mon avis tu utilises trop d'id et lorsque tu veux cibler un/des éléments en particulier les méthodes querySelector()/querySelectorAll() sont tes amies . Le principe est simple en général, tu "variabilises" ton point d'entrée et ensuite avec cette variable, tu cibles les sous éléments. (En CSS/SASS, tu peux utiliser cette même technique).
exemple :

<div id="unblock">
    <ul>
        <li>quelque chose</li>
    </ul>
</div>

let $unblock = document.getElementById('unblock'),
    $ul = $unblock.querySelector('ul'),
    $li = $unblock.querySelectorAll('li');

- Sache qu'utiliser un id comporte un risque énorme de collision. Il est préférable d'utiliser des class. Perso, j'utilises les id quasiment dans les <form> et sous élements de <form>. Ça m'arrive d'utiliser un id en dehors de <form>. Mais c'est très rare.

- Bien que ce soit juste pour ta liste d'ingrédients, j'aurais plutôt utilisé une liste de descriptions. Mais peut être que detail est aproprié à ta situation ?

Pour finir, j'aurais aimé que tu mettes ton code dans codepen par exemple. ça permet (pour ton souci) de mieux comprendre là où tu bloques. Si ce que t'a dit gcyrillus ne fonctionne pas (attention, ses remarques sont pertinentes puisqu'il a mis en exergue un souci) et suivant ce que j'ai pu lire, je pense que ton code JS est déclaré en amont de ton code HTML. Si c'est le cas, je pense que tu devrais utiliser :

// lorsque le DOM est chargé
window.addEventListener('DOMContentLoaded', ()=>{
    //etc.
});

équivalent en jQuery de

$(function(){
    //etc.
});

ou de

$(document).ready(function(){
    //etc.
});

Modifié par niuxe (23 May 2021 - 14:08)