tu as plusieurs pavés numériques ???
encore une fois pas besoin de savoir avec getElementBy ...
puisque dasn le onclick tu as this.innerHTML
Version imprimable
tu as plusieurs pavés numériques ???
encore une fois pas besoin de savoir avec getElementBy ...
puisque dasn le onclick tu as this.innerHTML
je pense que mon incompréhension viens de l'utilité du innerHtml ... ça fait quoi ça au juste ?
innerHTML c'est le contenu de la balise ...
Ah ok donc this.innerHtml renverra le contenu de la cellule de table où je viens de cliquer ?
C'est pour ça que tu me dis que le getElement ne sert pas à sélectionner la cellule ?
Mais alors du coup il sert à quoi ce getElement ?
je crois que tu confonds deux choses.. la focnction qui vient mettre des onmouseover, onmouseout et onclick sur les cellules du tableau
et
la focntion du onclik des cellules qui ajoute le contenu aux inputs
en fait àprès la fonction qui construit les onclik du tableau c'est comme si tu avais:
mais au lieu de l'ecrire pour chaque td j'ai fait un code qui le fait pour moi ...Code:
1
2
3 <td onmousedown="this.calssName='down'"; onmouseup="this.className='up'" onclick="if (!!activeinput){ if(this.indice<11){activeinput.value+=this.innerHTML;} if(this.indice==11){activeinput.value=activeinput.value.substr(0,activeinput.value.length-1)} if(this.indice==12){activeinput.value=""}">7</td>
bonjour j'aimerai savoir si il est possible d'adapter le clavier numérique tu as crée sans utiliser de table mais des li a la place? je suppose que l'adaptation est a faire dans la fonction js mais je suis débutant en js ^^"
Oulà , beau déterrage ...
remplacer le table par un ul et des li est tout a fait possible, cela ne relève pas de js mais de css ...
definir le width des li le mettre en inline bloc et float left et coller un clear both en, bout de ligne ...
oui déterrage de très loin désoler ^^ .
oui j'ai déjà fais la mise en forme dans le css sans soucis ^^ mais j'ai essayer de remplacer
parCode:tdcollection=document.getElementsByTagName('table')[0].getElementsByTagName('td')
mais ca ne fonctionne pas :sCode:tdcollection=document.getElementsByTagName('ul').getElementsByTagName('li')
Non, au contraire, c'est tout à ton honneur ça montre que tu as bien recherché sur nos forumsCitation:
oui déterrage de très loin désoler ^^ .
Peux tu nous montrer ton code actuel html css et js ... ?
html: (mon lu a une partie en buttons pour tester les 2 et biensure une seul des deux solution restera ^^")
et la partie de css qui est utliser (c'est encore en travaux XD )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
67
68
69
70
71
72 <html> <head> <meta charset="UTF-8"> <title>Bienvenue sur restApp</title> <link rel="stylesheet" href="css/screen.css" media="screen, projection" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <script type='text/javascript'> var activeinput function populateTd(){ var tdcollection=document.getElementsByTagName('ul').getElementsByTagName('li') for (i=0;i<tdcollection.length;i++){ tdcollection[i].className='up' tdcollection[i].onmousedown=function(){this.className='down'} tdcollection[i].onmouseup=function(){this.className='up'} tdcollection[i].onclick=function(){if (!!activeinput){activeinput.value+=this.innerHTML}} } } </script> <body onload='populateTd()'> <!-- LOGO --> <header> <img src="img/logoHeader.jpg"/> </header> <nav> <ul> <li><a class="select" href="index.html">Caisse</a></li> <li><a href="serveurs.html">Serveurs</a></li> <li><a href="chiffres.html">Chiffres</a></li> </ul> </nav> <section id="espece"> <div> <div> <ul id="calculette"> <li>7</li> <li>8</li> <li>9</li> <li>4</li> <li>5</li> <li>6</li> <li><input type="button" value="1" /></li> <li><input type="button" value="2" /></li> <li><input type="button" value="3" /></li> <li><input type="button" value="C" /></li> <li><input type="button" value="0" /></li> <li><input type="button" value="." /></li> </ul> </div> <div> <ul id="info"> <li>Total a payer: </li> <li>300</li> <li>Espèce: </li> <li><input type='text' onfocus="activeinput=this" /></li> <li>A rendre: </li> <li>0.50</li> </ul> </div> <div> <a href="#">Annuler</a> <a href="#">Valider</a> </div> </div> </section> </body> </html>
je reprécise que c'est en travaux ^^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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128 // --------------------------------------------------------------------------- // Imports @import "base"; @import "compass/reset"; @import "compass"; /* -------------------------------------------------------------------------*/ /* Layout */ $saumon: #f5edd6; $marron: #412114; $rouge: #d23129; body{ width: 90%; @include container; @include susy-grid-background; background-color: $saumon; font-family: Arial; header{ @include span-columns($total-columns , $total-columns); img{ @include span-columns(3 , $total-columns); margin-top: 0.2em; } } nav{ @include span-columns(6 omega , $total-columns); ul{ @include span-columns(6 omega , 6); li{ @include span-columns(2 , 6); @include box-sizing(border-box); display: inline-block; font-size: 3em; text-align: center; a{ @include box-sizing(border-box); padding: 0.2em 0.2em 0 0.2em; border-radius: 0.5em 0 0 0 ; text-decoration: none; background-color: $rouge; color: $saumon; &:hover{ background-color: $marron; } } a.select{ background-color: $marron; } } } } #espece{ > div{ @include span-columns(12, $total-columns); @include box-sizing(border-box); margin: 1em; height: 27em; padding: 1em; #calculette{ @include pre(2 , $total-columns); @include span-columns(3 ,$total-columns ); li{ @include span-columns(1 ,3 ); @include box-sizing(border-box); background-color:$rouge; display: inline-block; font-size: 2em; font-weight: bold; text-align: center; width: 3em; height: 3em; margin:0.1em; input{ width: 100%; height: 100%; } } } #info{ @include span-columns(2,$total-columns); width: 20em; margin li{ @include span-columns(1 ,2 ); @include box-sizing(border-box); display: inline-block; font-size: 1em; height: 1.6em; width: 10em; margin-top: 1em; input{ width: 50%; } } } a{ @include box-sizing(border-box); @include span-columns(1 ,2 ); @include box-sizing(border-box); display: inline-block; width: 8em; height:6em; font-weight: bold; font-size: 1.2em; padding-top:2.5em; text-align: center; margin-top: 2em; background-color: $rouge; color: $saumon; text-decoration: none; &:hover{ background-color: $marron; } } } } }
La méthode getElementsByTagName() s'applique à un élément et renvoie une collection.Code:document.getElementsByTagName('ul').getElementsByTagName('li')
Il n'est donc pas possible de faire ce type de chainage.
D'autant plus qu'un li étant placé dans un ul, ça n'a pas vraiment d'utilité...
ok donc le problème viens bien du script js et c'est ce que j'aimerai corriger :D
Sinon en restant sur getElementsByTagName
encore faut il que ce soit le premier de la page ...Code:document.getElementsByTagName('ul')[0].getElementsByTagName('li')
j'ai bien modifier le script js
charger la méthode dans le bodyCode:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <script type='text/javascript'> var activeinput function populateLi(){ var licollection=document.getElementsById('calculette').getElementsByName('li') for (i=0;i<licollection.length;i++){ licollection[i].onclick=function(){if (!!activeinput){ activeinput.value+=this.innerHTML; }} } } </script>
et rajouterCode:<body onload='populateLi()'>
dans le css mais ca ne fonctionne pas :s ai je oublier quelque chose?Code:cursor:pointer;
mon code ...
ton codeCode:licollection=document.getElementById('calculette')
cherche la différence ...Code:licollection=document.getElementsById('calculette')
lol en effet le petit "s" qui fait tache et que je viens de corriger mais toujours rien :s
as tu test mon code sur codepen ?
oui ton code sur codepen fonctionne très bien
et qu'en conclus tu ?
lien utile:
http://eric-pommereau.developpez.com...l-web/firebug/