[Résolu] Differents contenus dans un div

Bonjour et merci gcyrillus,
je vais rectifier sur ma page, j'ai vu la différence , 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

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
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)

Je vais mettre le sujet résolu sinon ça risque de durée des pages
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.

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"

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

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)