18049 sujets

Questions générales et questions de débutants

[Résolu] Differents contenus dans un div

Pages :
Modérateur
(reprise du message précédent)

Bonjour,

oui, tu as bien compris,
Pour ajouter aux exemples, tu peut aussi faire avec un select, en considérant chaque ligne de ton tableau comme un objet Smiley cligne 
<!DOCTYPE html>
<html lang="fr">
	
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="fruits.css">
		<script src="fruits.js" defer></script>
		<title>Fruits rouges</title>
	</head>
	
	<body>
		<h1>Les fruits rouges :</h1>
		<main>
			<section class="liste">
				<form action="">
					<p>Votre fruit préféré :</p>
					<select name="fruit">
						<option value="0">Cerise</option>
						<option value="1">Fraise</option>
						<option value="2">Framboise</option>
						<option value="3">Mûre</option>
					</select>
				</form>
			</section>
			
			<section class="contenu">
				<h2 class="titre"></h2>
				<p class="description"></p>
				
			</section>
		</main>
	</body>
</html>

et
let favouriteFruit = document.querySelector('select[name="fruit"]');
favouriteFruit.addEventListener("change", (event) => {	
	const result = (event.target.value);
	console.log(result)	
	fetch("fruits.json")	
	.then(Response => Response.json())
	.then(data => {
		let title = data[result].titre;
		let content = data[result].description;		
		document.querySelector(".titre").innerText = title;
		document.querySelector(".description").innerHTML = content;		
	}).catch((erreur) => console.log('Erreur : ' + erreur));
})

cdt
Modifié par gcyrillus (05 Aug 2024 - 12:59)
Modérateur
@ricem,

attention, tu fais une erreur ici http://www.ricem.contact/portfolio/variable.php

a écrit :
L’instruction "var" peut également être utilisée pour déclarer une variable, elle est identique à "let", mais elle est considérée comme obsolète.
Pour autant, ne soyez pas surpris d’en trouver parfois dans le code d’autres développeurs, ou dans de vieux projets.

C'est faux pour var : voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/block#exemples ou pas complétement : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode#diff%C3%A9rences_du_mode_strict
Modifié par gcyrillus (05 Aug 2024 - 16:30)
Bonjour et merci gcyrillus,
je vais rectifier sur ma page, j'ai vu la différence Smiley cligne , par contre pour revenir a mon "léger" problème, j'ai modifier le fichier json comme suit : 
[
    {
        "titre": "Les fruits rouges",
        "description": "Veuillez sélectionner l'un des fruits dans le panneaux de gauche."
    },
    {
        "titre": "Cerise",
        "description": "La cerise est le fruit comestible du cerisier, il s'agit d'un fruit charnu à noyau de forme sphérique, généralement de couleur rouge."  
    },
    {
        "titre": "Fraise",
        "description": "La fraise est un petit fruit rouge issu des fraisiers, espèces de plantes herbacées appartenant au genre Fragaria"
    },

    {
        "titre": "Framboise",
        "description": "La framboise est un fruit rouge issu du framboisier, un arbrisseau de la famille des rosacées.."   
    },
    {
        "titre": "Mûre",
        "description": "La mûre est un fruit comestible de la ronce commune, buisson épineux très envahissant du genre Rubus, de la famille des Rosacées, comme le framboisier"
    }
]
comme cela lorsque l'on arrive sur la page il y a un message avec un titre Smiley biggrin

du coup j'essaie de rajouter par défaut qu'il affiche la value [0] avec ce code 
fetch("fruits.json")
    .then(Response => Response.json())
    .then(data => {
            document.querySelector(".titre").innerText = data[0]["titre"];
            document.querySelector(".description").innerText = data[0]["description"];

            let favouriteFruit = document.querySelectorAll('input[name="fruit"]');
            for (let i = 0; i < favouriteFruit.length; i++) {
                favouriteFruit[i].addEventListener("change", (event) => {

                    const result = (event.target.value);
                    console.log(result)
                    
                    let title = data[result]["titre"];
                    let content = data[result]["description"];

                    document.querySelector(".titre").innerText = title;
                    document.querySelector(".description").innerText = content;

                }).catch((erreur) => console.log('Erreur : ' + erreur));
            }
    })
ça fonctionne il affiche la valeur 0 par défaut, il fonctionne avec cerise, mais pas les autres Smiley ohwell
il me mets un message 
Uncaught (in promise) TypeError: favouriteFruit[i].addEventListener(...) is undefined

Une idée...?
Modifié par ricem (05 Aug 2024 - 17:37)
Modérateur
ricem a écrit :
Bonjour et merci gcyrillus,
je vais ... comme cela lorsque l'on arrive sur la page il y a un message avec un titre Smiley biggrin

du coup j'essaie de rajouter par défaut qu'il affiche la value [0] avec ce code 
fetch("fruits.json")
    .then(Response =&gt; Response.json())
    .then(data =&gt; {
            document.querySelector(".titre").innerText = data[0]["titre"];
            document.querySelector(".description").innerText = data[0]["description"];

            let favouriteFruit = document.querySelectorAll('input[name="fruit"]');
            for (let i = 0; i &lt; favouriteFruit.length; i++) {
                favouriteFruit[i].addEventListener("change", (event) =&gt; {

                    const result = (event.target.value);
                    console.log(result)
                    
                    let title = data[result]["titre"];
                    let content = data[result]["description"];

                    document.querySelector(".titre").innerText = title;
                    document.querySelector(".description").innerText = content;

                }).catch((erreur) =&gt; console.log('Erreur : ' + erreur));
            }
    })
ça fonctionne il affiche la valeur 0 par défaut, il fonctionne avec cerise, mais pas les autres Smiley ohwell
il me mets un message 
Uncaught (in promise) TypeError: favouriteFruit[i].addEventListener(...) is undefined

Une idée...?


Oui,
catch() doit être aprés then() et pas dedans Smiley cligne 
fetch("fruits.json")
.then(Response => Response.json())
.then(data => {
	document.querySelector(".titre").innerText = data[0]["titre"];
	document.querySelector(".description").innerText = data[0]["description"];
	
	let favouriteFruit = document.querySelectorAll('input[name="fruit"]');

	for (let i = 0; i < favouriteFruit.length; i++) {

		favouriteFruit[i].addEventListener("change", (event) => {			
			const result = (event.target.value);
			console.log(result)			
			let title = data[result]["titre"];
			let content = data[result]["description"];			
			document.querySelector(".titre").innerText = title;
			document.querySelector(".description").innerText = content;			
		})

	}

})
.catch((erreur) => console.log('Erreur : ' + erreur));


en indentant le code, c'est plus facile à voir Smiley smile , à verifier
Modifié par gcyrillus (05 Aug 2024 - 19:27)
Meilleure solution
Je vais mettre le sujet résolu sinon ça risque de durée des pages Smiley lol
Je "penses" avoir compris le truc, je vais essayer avec le 'li' en entrant des "value", si jamais vraiment je n' y arrive pas, j'ouvrirais un autre sujet et encore merci.
Modifié par ricem (05 Aug 2024 - 22:17)
Bonjour,
Pour info, je donne le code final qui fonctionne, le html :
<main>
        <section class="liste">
            <p>Votre fruit préféré :</p>
            <ul>
                <li><a href="#" value="1">Cerise</a></li>
                <li><a href="#" value="2">Fraise</a></li>
                <li><a href="#" value="3">Framboise</a></li>
                <li><a href="#" value="4">Mûre</a></li>
            </ul>
        </section>

        <section class="contenu">
            <h2 class="titre"></h2>
            <p class="description"></p>

        </section>
    </main>

Et le javaScript : 
fetch("fruits.json")
        .then(response => response.json())
        .then(data => {
            // Initialiser le titre et la description avec les données du premier fruit
            document.querySelector(".titre").innerText = data[0]["titre"];
            document.querySelector(".description").innerText = data[0]["description"];

            let selection = document.querySelectorAll('a');
            for (let i = 0; i < selection.length; i++) {
                selection[i].addEventListener("click", (event) => {
                    event.preventDefault();  // Empêcher le comportement du lien par défaut

                    const result = event.target.getAttribute('value');
                   
                    let title = data[result]["titre"];
                    let content = data[result]["description"];

                    document.querySelector(".titre").innerText = title;
                    document.querySelector(".description").innerText = content;
                });
            }
        })
        .catch((erreur) => console.log('Erreur : ' + erreur));

Si vous avez des commentaires, je les prends avec plaisir.
Modérateur
Bonjour,

Bon, nous t'avions donné des exemples avec des listes qui fonctionnent et qui sont valides.

Là, tu as quelque chose qui marche mais qui n'est pas bien. pour diverses raisons, et c'est pas la liste mais comment tu t'en sert.

- le lien qui mène nulle part, une fausse bonne idée, ne référence rien ni ne peut-être mis en favoris par exemple.

- l'attribut value qui n'existe pas pour un lien, tu peut te servir d'un data-attribute si vraiment le besoin se fait sentir : ex: data-value, du coup c'est un attribut valide et prévue. Voit l'usage des attributs de données: https://developer.mozilla.org/fr/docs/Learn/HTML/Howto/Use_data_attributes

- tu as une liste de lien déjà toute faite en dur , mais pas le contenu, pourquoi l'un et pas l'autre ? Alors que tu pourrais générer cette liste à partir des champs que tu veut affichés. Par la suite, en ajoutant ou enlevant un fruit, ta liste resterait conforme aux choix possibles sans rééditer ton document.(vu dans les exemples proposés)
- ...

D'autres t'indiqueront d'autre bonnes raisons de ne pas faire et traiter ton affichage avec ta liste comme tu le fait, même si "tant pis, ça marche" Smiley cligne

Et puis, profitons de ce moment pour te proposer aussi de te servir de ton catch(error) pour afficher un message sur la page afin t'indiquer au visiteur qu'il s'est passé quelque chose et qu'il n'a pas fait d'erreur Smiley smile

Cordialement
Modifié par gcyrillus (09 Aug 2024 - 14:23)
salut, et si je fais ceci :

<ul>
    <li data-value="1">Cerise</li>
    <li data-value="2">Fraise</li>
    <li data-value="3">Framboise</li>
    <li data-value="4">Mûre</li>
</ul>

et ceci pour conserver un semblant de lien 
li{
    margin-bottom: 20px; 
    list-style: none; 
    cursor: pointer;}

ul :hover{
    color: blue; }

la liste ne devrait normalement pas bouger.
Modifié par ricem (09 Aug 2024 - 16:49)
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à