Bonjour encore moi, bien dormis ?

Je suis, je pense un peu perdu, comme hier sur la même fonction, je reste bloqué. L'écoute des articles fonctionne comme voulus, mais j'ai un souci sur mon ul qui ne semble pas englobé la liste li comme souhaiter.

displayRestaurants(restaurant){

			document.getElementById("list").innerHTML += '<article id="' + this.idRestaurant + '" class="article"><h5 class="H5">' + this.name + '</h5><p>' + this.address + '</p>' + '<p>' + this.description + '</p><ul id="ul-' + this.idRestaurant + '">';
			
			for(let rating of this.ratings){
				document.getElementById(this.idRestaurant).innerHTML += '<li class="listElementNone article-'+this.idRestaurant+' ">' + rating.stars + '-' + rating.comment + '</li>';
			}
			
			document.getElementById("list").innerHTML += '</ul></article>';
		

	}

screen de l'affichage 

Je pense que ce souci fait que je n'arrive pas à récupérer les class des li pour suppr la class listElementNone si clic sur l'article

Salutations, 

Je pense que tu ne t'y prends pas de la mnière la plus optimale, tu codes du JS comme du PHP.

Le fait d'utiliser un langage côté client nous permet de manipuler les éléments du DOM  avec des fonctions dédiées. C'est à dire que tu n'es pas obligé de concaténer tout ton html. 
Je te recommande par exemple de regarder du côté de createElement et append.
Je t'ai fais un petit codePen en espérant qu'il soit assez clair.

https://codepen.io/barbgegrasse/pen/LYZGQRm?editors=1011

Salut,

Voilà ce que je pense être le problème :

Tu peux voir que derrière la propriété 'innerHTML' tu as un setter (donc une function) qui effectue un traitement à la string que tu associes à cette propriété.

Ce traitement, dans le cas d''innerHTML' consiste notamment à corriger et parser la string sous forme de HTML.

Donc quand tu fais ça :

document.getElementById("list").innerHTML += '<article id=...<ul id="ul-' + this.idRestaurant + '">';

En réaliter, le résultat après traitement sera ça :

document.getElementById("list").innerHTML += '<article id=...<ul id="ul-' + this.idRestaurant + '"></ul>';

Car le navigateur aura repérer l'ouverture de ta balise 'ul' sans qu'elle soit fermé, et lui pas con qu'il est, va se dire qu'il est nécessaire de la refermer pour que ça soit correcte.
Il ne va pas attendre ta ligne suivante qui fermera plus tard la balise.

De même, quand le navigateur va voir ta ligne :

document.getElementById("list").innerHTML += '</ul></article>';

Il va se dire que ta jamais ouvert de balise 'ul' ou 'article' et que ta dû faire une erreur en voulant fermer ces balises (qui donc, d'après lui, n'ont jamais été ouverte).

La solution est de passer par une variable qui contiendra ta string complète et d'associer cette string à 'innerHTML' :

displayRestaurants(restaurant){
 
            let html = '<article id="' + this.idRestaurant + '" class="article"><h5 class="H5">' + this.name + '</h5><p>' + this.address + '</p>' + '<p>' + this.description + '</p><ul id="ul-' + this.idRestaurant + '">';
             
            for(let rating of this.ratings){
                html += '<li class="listElementNone article-'+this.idRestaurant+' ">' + rating.stars + '-' + rating.comment + '</li>';
            }
             
            html += '</ul></article>';
            document.getElementById("list").innerHTML += html;
 
}

-
Edité par BrainError 15 octobre 2020 à 11:47:20

Merci beaucoup pour vos réponses,

Kovsky a écrit:

Salutations, 

Je pense que tu ne t'y prends pas de la mnière la plus optimale, tu codes du JS comme du PHP.

Alors oui, depuis que j'ai commencé le js, c'est mon grand souci... Comme j'ai commencé par le PHP, j'ai du mal ne pas mélanger.

Je vais tester vos idées, merci pour les explications. J'espère pouvoir par la suite manipuler la class des li afin de les afficher ou caché en fonction d'un clic. 

alors j'ai teste le code :

displayRestaurants(restaurant){
 
            let html = '<article id="' + this.idRestaurant + '" class="article"><h5 class="H5">' + this.name + '</h5><p>' + this.address + '</p>' + '<p>' + this.description + '</p><ul id="ul-' + this.idRestaurant + '">';
             
            for(let rating of this.ratings){
                html += '<li class="listElementNone article-'+this.idRestaurant+' ">' + rating.stars + '-' + rating.comment + '</li>';
            }
             
            html += '</ul></article>';
            document.getElementById("list").innerHTML += html;
 
}

-

qui resoud mon souci du ul, grand merci.

grand merci j'ai réussi avec votre aide !

-
Edité par benzinho1 15 octobre 2020 à 17:00:31