onclick sur image

**moimp** · 19/03/2017, 20h37

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

**danielhagnoul** · 20/03/2017, 00h28

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>

**moimp** · 20/03/2017, 20h47

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é.

**badaze** · 20/03/2017, 23h39

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>

onclick sur image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager