[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 !

Bonsoir,

2 trucs:

- une typo sur rappelContainer.innerHTMl = ing_partie01; au lieu de rappelContainer.innerHTML = ing_partie01;

- et puis, ce n'est pas l'objet que tu veut mais ce qu'il contient: rappelContainer.innerHTML = ing_partie01.innerHTML;

cdt
Modifié par gcyrillus (22 May 2021 - 23:07)

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)

Bonjour gcyrillus, bonjour niuxe

Merci à tous les deux pour vos retours, en effet, bien vu sur la typo, malgré l'indication, il m'a fallu un temps avant de trouver la faute... Et en effet, c'était ça

Je vais levé le pied sur les id et modifier mon code pour utiliser plus de query selector, je crois comprendre la logique et elle me paraît effectivement beaucoup plus souple.

Par contre, pour <dl> et <details>, à priori, je ne pense pas les utiliser. Je suis en train de coder pour un projet extra-scolaire, et le bloc dont je vous parle va être intégré à un wordpress de cuisine qui utilise des <ul> par défaut dans Gutemberg. Aussi, pour des raisons pratiques, je pense rester sur des <ul>. À moins que <dl> et <details> ne représentent une avancée suffisamment importante ( référencement, pratique à utiliser...), je vais toute de même creuser la piste...


Enfin, je pense travailler mon code pour que le bloc évolue en fonction du scroll de l'internaute, mais je vais essayé de me débrouiller tout seul ce coup-ci ! D'autant plus maintenant que je connais codepen

Affaire à suivre donc ! Merci encore infiniment à tous les deux d'avoir résolu mon problème ET éclairé ma lanterne !
Modifié par romain_le_renard (24 May 2021 - 22:31)