problème boutons et onclick/addEventListener par Tillbo - page 1

Bonjour,

En tant qu'écrivain à mes temps perdus, j'aimerais créer une petit apli pour moi qui me permettrait de générer mes personnages. Pour l'instant, j'ai juste fait l'accueil (inutile de le mentionner ici, il n'a rien inintéressant), ainsi que la page pour créer les univers des histoires (exemple : l'univers de Harry Potter).

Un univers est un objet, ayant comme propriétés le nom (ex : Harry Potter), une liste de caractères pour les personnages (ex: Nom; Prénom; Baguette ...), ainsi qu'une liste de personnages (ex : Harry; Ron; Hermione ...).

Quand je crée un univers, un bouton apparaît, avec le innerHTML ayant le nom de l'univers. Ils ont aussi une id, qui est leur objet univers, et, j'aimerais que quand on clique dessus, on aille sur une autre page (fait), mais aussi que l'on sauvegarde dans le localStorage, l'univers sur lequel on a justement cliqué. Et c'est là qu'intervient le problème.

J'ai essayé avec un monBouton.onclick = ('changerDePage(monBoutton.id'); mais quand je clque sur le boutton, ça ne fait rien.J'ai aussi essayé un monBouton.addEventListener('click', function() {changerDePage(monBouton.id)});, mais là, la paramètre de la fonction était null.

SVP, vous n'auriez pas une technique à me proposer pour que ça marche ? Merci.

P.S. : Je tiens à rester en javascript, même si ce n'est pas forcément pratique, et j'ai déjà fait une chose beaucoup moins lisible :

<html>
     <head>
          du code html...
     </head>
     <body>
          mon boutton pour ajouter l'univers...
          <div id='univers'></div>
     </body>
</html>

document.getElementById('univers').innerHTML += <button id='monObjet' onclick = ('changerDePage(monObjet.nom)')>monObjet.nom</button>

Mais bon, ce code était illisible, j'ai donc abandonné.

Sinon, voici mes codes actuels :

<!doctype html>

<html>
    <head>
        <meta charset="utf-8"/>
        <script src='../js/pratique.js'></script>
    </head>
    
    <body>
        <button onclick="ajouter()">Ajouter un univers</button>
        <div id='bouttons'></div>
        <button onclick="self.location.href='accueil.html'">Retour</button>
        <script src="../js/univers.js"></script>
    </body>
</html>

boutton();

function ajouter() {
    
    //Cree la liste des univers
    if (localStorage.getItem('listeUnivers') === null) {
        var listeUnivers = [];
    }
    else {
        var listeUnivers =  JSON.parse(localStorage.getItem('listeUnivers'));
    }   
    //Créer l'univers
    var univers = {
        nom: prompt('Quel est le nom du nouvel univers ?'),
        caracteres: [],
        personages: []
    };
    
    //Regarde si on n'a pas déjà créé l'univers
    for (var i = 0; i < listeUnivers.length; i++) {
        if (listeUnivers[i].nom === univers.nom) {
            alert('Cet univers à déjà été créé');
            return;
        };
    };
    
    listeUnivers.push(univers);
    alert('Votre nouvel univers appelé ' + univers.nom + ' a bien été créé');
    localStorage.setItem('listeUnivers', JSON.stringify(listeUnivers));
    boutton();
}

function boutton() {
    
    //Cree la liste des univers
    if (localStorage.getItem('listeUnivers') === null) {
        var listeUnivers = [];
    };
    else {
        var listeUnivers =  JSON.parse(localStorage.getItem('listeUnivers'));
    };  
    
    for (var i = 0; i < listeUnivers.length; i++) {
        var button = document.createElement('button');
        button.id = listeUnivers[i];
        button.innerHTML = listeUnivers[i].nom;
        button.addEventListener('click', function() {
            passage(button.id);                
        });
        document.getElementById('bouttons').appendChild(button);
    };
}

function passage(id) {
    localStorage.setItem('univers', JSON.stringify(id));
    self.location.href = 'voirUnivers.html';
}

La fonction bouton() au début étant là pour initialiser les boutons chaque rafraichissement de page.
Et ne vous souciez pas de pratique.js lié au fichier html : c'est une modif perso qui ne change rien au code.

-
Edité par Tillbo 22 novembre 2017 à 20:35:41

problème boutons et onclick/addEventListener

problème boutons et onclick/addEventListener

Supprimer

Modérer

Signaler le message aux modérateurs