Discussion: onclick sur image

  1. #1
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 208
    Points : 130
    Points
    130

    Par défaut onclick sur image

    Bonjour à tous,

    Dans la fonction qui suit tout fonctionne sauf le onclick. Je ne comprends pas pourquoi. J'ai essayé les variantes en commentaires qui ne fonctionnent pas non plus. Dans tous les cas l'attribut onclick n'est pas pris en compte.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    function fieldBtnAdd(lineNb, fieldNb, src) {
    	var insImg	 	= [];
    	insImg[lineNb]	= [];
    	insImg[lineNb][fieldNb] = document.createElement('img');
    	switch (src) {
    		case 'db':
    			insImg[lineNb][fieldNb].id = 'insText['+lineNb+']['+fieldNb+']';
    			insImg[lineNb][fieldNb].setAttribute('src', '_images/db.png');
    			insImg[lineNb][fieldNb].setAttribute('alt', 'db.png');
    			insImg[lineNb][fieldNb].setAttribute('title', addData);
    			//insImg[lineNb][fieldNb].setAttribute('onclick', 'addField(lineNb, fieldNb, "txt")');
    			insImg[lineNb][fieldNb].onclick = 'addField()';
    			break;
    		case 'text':
    			insImg[lineNb][fieldNb].id = 'insData['+lineNb+']['+fieldNb+']';
    			insImg[lineNb][fieldNb].setAttribute('src', '_images/edit.png');
    			insImg[lineNb][fieldNb].setAttribute('alt', 'edit.png');
    			insImg[lineNb][fieldNb].setAttribute('title', addText);
    			insImg[lineNb][fieldNb].setAttribute('onclick', 'addField(lineNb, fieldNb, "Data")');
    			//insImg[lineNb][fieldNb].setAttribute('onclick', 'addField()');
    			break;
    	}
    	return insImg[lineNb][fieldNb];
    }
    Le résultat est le suivant:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <img id="insText[0][0]" src="_images/db.png" alt="db.png" title="Extraire un élément de base de données">
    <img id="insData[0][0]" src="_images/edit.png" alt="edit.png" title="Saisir un texte">

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 672
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 672
    Points : 20 973
    Points
    20 973
    Billets dans le blog
    38

    Par défaut



    id="insText[0][0]"

    Non ! Un ID doit être unique dans la page web.

    Exemple :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="author" content="Daniel Hagnoul">
      <title>Test</title>
      <style>
        
      </style>
      <script>
        'use strict';
        
        let
          n = -1,
          images = [];
        
        function addField( src ){
          images[ ++n ] = fieldBtnAdd( src );
          document.querySelector( "main" ).appendChild( images[ n ] );
        }
        
        function fieldBtnAdd( src ){
          let
            addData = "Hello", // ?
            addText = "Bonjour", // ?
            elem = document.createElement( 'img' );
            
          switch ( src ){
            case 'db':
              elem.setAttribute( 'src', 'http://danielhagnoul.developpez.com/images/boule5.png' );
              elem.setAttribute( 'alt', 'db.png');
              elem.setAttribute( 'title', addData);
              elem.setAttribute( 'onclick', 'addField( "txt" )' ); // deuxième image "txt"
              break;
            case 'txt':
              elem.setAttribute( 'src', 'http://danielhagnoul.developpez.com/images/boule2.png');
              elem.setAttribute( 'alt', 'edit.png');
              elem.setAttribute( 'title', addText);
              elem.setAttribute( 'onclick', 'addField( "data" )'); // troisième image "data"
              break;
            case 'data':
              elem.setAttribute( 'src', 'http://danielhagnoul.developpez.com/images/boule3.png');
              elem.setAttribute( 'alt', 'data.png');
              elem.setAttribute( 'title', addText);
              elem.setAttribute( 'onclick', 'alert("data click")'); // alert !
              break;
          }
          
          return elem;
        }
        
        document.addEventListener( 'DOMContentLoaded', ev => {
          
          addField( "db"); // première image "db"
          
        }, false );
        
        window.addEventListener( 'load', ev => {
          
          // Liste les images dans la console (touche F12)
          document.querySelector( "#btnImages").addEventListener( "click", ev => {
            console.table( images );
          }, false );
     
        }, false );
      </script>
    </head>
    <body>
      <main>
        <div>
          <button id="btnImages">Liste les images dans la console (touche F12)</button>
        </div>   
      </main>
    </body>
    </html>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 208
    Points : 130
    Points
    130

    Par défaut

    Bonjour et merci Daniel,

    Je ne comprends pas tout et il me semble que je dois apporter quelques explications sur ma fonction et mon but.
    Tout d'abord mon id est unique puisqu'il comprend un tableau à deux dimensions dont le nom est soit insText, soit insData et que les clés de chaque tableau désignent un numéro de ligne et la seconde un rang de groupe d'éléments dans cette ligne. Un groupe d'éléments comprend une image insText, une image insData, une balise de formulaire (voir plus loin) et une image pour la suppression du groupe.
    Mon application consiste à composer des badges, avec un mixte de texte et de champs de base de données selon le choix de l'utilisateur.
    Mon document html contient un tableau dans lequel chaque ligne sert à définir une ligne du badge. Dans cette ligne, je peux insérer soit un texte fixe pour tous les badges avec une balise <input>, soit sélectionner un champ de base de données avec une balise <select>.
    L'image insText[lineNb][fieldNb] sert de bouton pour insérer une balise <input>, l'mage insData[lineNb][fieldNb] sert de bouton pour insérer une liste déroulante dont chaque option est un champ de la base de données. C'est l'objet de ma fonction addField() qui reçoit en arguments le n° de la ligne, le rang du champ et le type de balise (txt pour input et data pour select).
    Un troisième bouton est inséré simultanément pour supprimer la balise qui vient d'être inséré.

  4. #4
    Membre éprouvé Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    septembre 2002
    Messages
    660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : septembre 2002
    Messages : 660
    Points : 1 036
    Points
    1 036

    Par défaut

    En fait il y a plusieurs choses qui n'allaient pas.

    Pour qu'un évènement puisse être appelé, il faut que l'élément soit attaché au document (body.append...)
    Dans 'title' tu mettais la référence à une fonction alors que title est une chaîne.
    Le tableau ne sert à rien. D'une part il est local et d'autre part il ne sert à rien (je me répète ).


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
     
    <html>
    <head>
    <script>
    function toto() {
     alert(this.id);
    }
    function fieldBtnAdd(lineNb, fieldNb, src) {
     var insImg = document.createElement('img');
     switch (src) {
      case 'db':
       var id = 'insText['+lineNb+']['+fieldNb+']';  
       //insImg.setAttribute('src', '_images/db.png');
       insImg.setAttribute('id', id);   
       insImg.setAttribute('src', 'redwood.jpg');  // ceci est une image chez moi
       insImg.setAttribute('alt', 'db.png');
       insImg.setAttribute('title', "+++++"); // mets le titre que tu veux
       document.body.appendChild(insImg);
       insImg.addEventListener("click",toto,false);
       break;
      case 'text':
       // a faire
       break;
     }
     return insImg;
    }
    </script>
    </head>
    <body>
    <script>
    h = fieldBtnAdd(0,0,'db').outerHTML;
    document.writeLn(h);
    </script>
    <br/><br/>
    <script>
    h = fieldBtnAdd(1,0,'db').outerHTML;
    document.writeLn(h);
    </script>
    </body>
    </html>
    Cela ne sert à rien d'optimiser quelque chose qui ne fonctionne pas.

    Mon site : www.emmella.fr

    Je recherche le manuel de l'Olivetti Logos 80B.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Onclick sur image pour lancer une fonction
    Par kilrou dans le forum JavaScript
    Réponses: 4
    Dernier message: 07/04/2010, 02h34
  2. Onclick sur Image --> Ajax
    Par kilian dans le forum JavaScript
    Réponses: 1
    Dernier message: 06/07/2009, 15h35
  3. Est il possible d'assigner 2 'onclick' sur lien image ?
    Par bilou95 dans le forum JavaScript
    Réponses: 4
    Dernier message: 03/04/2007, 09h53
  4. OnClick sur une image ?
    Par fabseven dans le forum JavaScript
    Réponses: 1
    Dernier message: 04/09/2006, 21h49
  5. [HTML][débutante] Map ou Onclick sur image ? Différent ?
    Par khany dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 08/12/2004, 14h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo