Ajouter la valeur d'un champ quand on clique dessus.

Version imprimable

Bonsoir,
J'utilise une boucle pour effectuer une action sur tous les inputs d'une zone bien définie:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 [...] var nI = new Number (document.getElementById ("div-boutons").getElementsByTagName ("input").length - 1); for (nI; nI >= 0; nI--) { document.getElementById ("div-boutons").getElementsByTagName ("input") [nI].onclick = function () { document.getElementById ("form").ipt.value = document.getElementById ("form").ipt.value + document.getElementById ("div-boutons").getElementsByTagName ("input") [nI].value; }; } } } [...]
Mais le problème vient quand je clique sur l'un des inputs en question:

Citation:

Erreur : uncaught exception: [Exception... "Index or size is negative or greater than the allowed amount" code: "1" nsresult: "0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)" location: "file:///home/sebastien/www/test.js Line: 32"]

La ligne 32 étant celle-là:
Code:

1 2 document.getElementById ("form").ipt.value = document.getElementById ("form").ipt.value + document.getElementById ("div-boutons").getElementsByTagName ("input") [nI].value;
En fait, c'est normal parce que nI renvoit -1, mais moi j'aimerais savoir si quelqu'un connaît une méthode pour se que je veux faire.
Voilà, merci.
@+

04/06/2007, 15h01
E.Bzz

Bonjour,
les .value étant gérés comme des string,

Code:

document.getElementById ("form").ipt.value = parseInt(document.getElementById ("form").ipt.value) + parseInt(document.getElementById ("div-boutons").getElementsByTagName ("input") [nI].value);

:?
05/06/2007, 09h14
E.Bzz

Suite à ton MP, 2 questions :
1) Veux-tu additionner les 2 valeurs ou les concaténer ?
2) Donne la partie HTML parce que ça sent (aussi) l'erreur de syntaxe. A vérifier avec la manière dont les objets sont définis ...

A+

Salut E. Bzz.
Alors, je ne veux pas additionner les 2 valeurs, mais les concaténer.
Et voilà le code HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<form method="post" action="form-boutons.php" id="le-form">
  <div>
    <input type="text" name="ipt" id="ipt">
  </div>
 
  <div id="div-boutons">
    <input type="button" name="bt_1" value="bouton 1">
    <input type="button" name="bt_2" value="bouton 2">
    <input type="button" name="bt_3" value="bouton 3">
    <input type="button" name="bt_4" value="bouton 4">
    <input type="button" name="bt_5" value="bouton 5">
  </div>
 
  <div>
    <input type="submit" name="sbt" value="ok">
  </div>
</form>

Et puis tant qu'à faire le code JavaScript même s'il n'y a rien de bien intéressant enplus:

Code:

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
 
 
function fn_bouton ()
{
 
    if (document.getElementById ('le-form') &&  document.getElementById ('ipt'))
    {
        document.getElementById ('ipt').focus ();
 
 
        var nI = new Number (document.getElementById ('div-boutons').getElementsByTagName ('input').length - 1);
 
 
        for (nI; nI >= 0; nI--)
        {
            document.getElementById ('div-boutons').getElementsByTagName ('input') [nI].onclick = function ()
            {
 
                document.getElementById ("ipt").value = document.getElementById ("ipt").value + document.getElementById ("div-boutons").getElementsByTagName ("input") [nI].value;
                document.getElementById ('ipt').focus ();
 
            };
        }
    }
 
}

05/06/2007, 15h09
E.Bzz

Ok.
Par étapes :
* donne aussi un id="ipt" à ton input (en plus du name)
* remplace tous les

Code:

document.getElementById ('form').ipt.quelquechose

par

Code:

document.getElementById('ipt').quelquechose

* en bonus : ne donne pas d'id="form" (mot réservé) => "le_form"

Tout sera peut-être pas résolu, mais on y verra plus clair ;)

A+

C'est fait ^^.
Mais juste pour te montrer d'où vient le problème, test ce script:

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="fr">
  <head>
    <title>Test du formulaire</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript">
      <!--
        function fn_bouton ()
        {
 
            if (document.getElementById ('le-form') &&  document.getElementById ('ipt'))
            {
                document.getElementById ('ipt').focus ();
 
 
                var nI = new Number (document.getElementById ('div-boutons').getElementsByTagName ('input').length - 1);
 
 
                for (nI; nI >= 0; nI--)
                {
                    document.getElementById ('div-boutons').getElementsByTagName ('input') [nI].onclick = function ()
                    {
 
                        window.alert (nI);
 
                        document.getElementById ("ipt").value = document.getElementById ("ipt").value + document.getElementById ("div-boutons").getElementsByTagName ("input") [nI].value;
                        document.getElementById ('ipt').focus ();
 
                    };
                }
            }
 
        }
 
 
        if (document.getElementById && document.getElementsByTagName)
        {
            window.onload = fn_bouton;
        }
      -->
    </script>
  </head>
 
  <body>
    <form method="post" action="form-boutons.php" id="le-form">
      <div>
        <input type="text" name="ipt" id="ipt">
      </div>
 
      <div id="div-boutons">
        <input type="button" name="bt_1" value="bouton 1">
        <input type="button" name="bt_2" value="bouton 2">
        <input type="button" name="bt_3" value="bouton 3">
        <input type="button" name="bt_4" value="bouton 4">
        <input type="button" name="bt_5" value="bouton 5">
      </div>
 
      <div>
        <input type="submit" name="sbt" value="ok">
      </div>
    </form>
  </body>
</html>

OK : je pense que c'est parce que nI n'est pas connu à l'exécution du alert().

Y a peut-être une solution avec eval(), mais je suis pas candidats au lynchage :mrgreen:

Tu doit pouvoir utiliser une propriété de l'input :
soi extraire l'indice de sa value ("bouton 1")
soi utiliser une propriété de l'input telle que tabindex :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="fr">
  <head>
    <title>Test du formulaire</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript">
      <!--
        function fn_bouton ()
        {
 
            if (document.getElementById ('le-form') &&  document.getElementById ('ipt'))
            {
                document.getElementById ('ipt').focus ();
 
 
                var nI = new Number (document.getElementById ('div-boutons').getElementsByTagName ('input').length - 1);
 
 
                for (nI; nI >= 0; nI--)
                {
                    document.getElementById ('div-boutons').getElementsByTagName ('input') [nI].onclick = function ()
                    {
 
                        window.alert (this.tabIndex);
 
                        document.getElementById ("ipt").value = document.getElementById ("ipt").value + document.getElementById ("div-boutons").getElementsByTagName ("input") [nI].value;
                        document.getElementById ('ipt').focus ();
 
                    };
                }
            }
 
        }
 
 
        if (document.getElementById && document.getElementsByTagName)
        {
            window.onload = fn_bouton;
        }
      -->
    </script>
  </head>
 
  <body>
    <form method="post" action="form-boutons.php" id="le-form">
      <div>
        <input type="text" name="ipt" id="ipt">
      </div>
 
      <div id="div-boutons">
        <input type="button" name="bt_1" value="bouton 1" tabindex="1">
        <input type="button" name="bt_2" value="bouton 2" tabindex="2">
        <input type="button" name="bt_3" value="bouton 3" tabindex="3">
        <input type="button" name="bt_4" value="bouton 4" tabindex="4">
        <input type="button" name="bt_5" value="bouton 5" tabindex="5">
      </div>
 
      <div>
        <input type="submit" name="sbt" value="ok">
      </div>
    </form>
  </body>
</html>

A+