Controler la value d'un <input etc./> [Résolu]

quasinewbie · 06/05/2011, 10h23

Bonjour,

Voici le code HTML de ma page

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
 
<body>
<div id="measuring_tape_rolling_picto"></div>
<div id="measuring_tape_cursor">
       <input type="hidden" id="mouseX" value="???"/>   
</div>
<div id="measuring_tape_fixed_picto"></div>
<div id="measuring_tape_numeric">
       <!-- Ca ne marche pas ici : --> <input type="hidden" id="numeriX" value="???"/>
</div>
 
<div style="float:right">
       <input type="text" id="debug" value="debug"></input>
       <!-- Ca marche ici : <input type="hidden" id="numeriX" value="???"/> -->
</div>
</body>

Comme vous le voyez quelques <div> et <input> que je piolote par javascript.

Ce qui me pose problème, c'est l'input "numeriX" en effet partout dans mon javascript $('#numeriX').val() me retourne undefined, ce qui d'autant plus frustant c'est que son jumeau l'input "mouseX" lui fonctionne très bien ! Aussi bien en lecture $('#mouseX).val() qu'en écriture $('#mouseX).val(newval)

Si je déplace <input type="hidden" id="numeriX" value="???"/> à la fin avec l'input de debug, là ça marche, mais c'est intellectuellement frustrant je trouve ! Ce <input type="hidden" id="numeriX" value="???"/> est sémantiquent rattaché à la <div id="measuring_tape_numeric">

Pour information voici l'extrait de mon javascript/jquery

Code js :

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
 
    $('#measuring_tape_numeric').bind("keydown", function (e) {
        if (e.keyCode >= 96 && e.keyCode <= 105)
        {
            $c = (parseInt(e.keyCode) - 96);
            if ($('#numeriX').val() == "ongoing")
            {
                alert($('#numeriX').val() + ' num ' + $c);
            }
            else
            {
                alert($('#numeriX').val() + ' num ' + $c);
                $('#numeriX').val("ongoing");
                $('#measuring_tape_numeric').text($c + 'mm');
            }
        }
        else if (e.keyCode == 13)
        {
        alert('enter'+e.keyCode);
        }
});

$('#numeriX').val() me renvoie toujours "undefined"

Loceka · 06/05/2011, 11h00

A priori il n'y a aucune raison pour que ça marche sur le debug et pas sur le numeriX.

Tu peux faire voir le code qui fonctionne sur le debug ?

quasinewbie · 06/05/2011, 11h03

Voici mon javascript dans son intégralité.

Code js :

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
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
 
/*
* Author : byAnhor
*/
 
$(document).ready(function () {
 
    $width = 200;
    $('#measuring_tape_rolling_picto').css('width', $width);
    $('#measuring_tape_fixed_picto').css('left', $width);
    $('#measuring_tape_cursor').css('left', $width);
    $('#measuring_tape_numeric').css('top', 0);
    $('#measuring_tape_numeric').css('left', parseInt($width) + parseInt($('#measuring_tape_fixed_picto').css('width')));
 
    bpx_px =  $('#measuring_tape_rolling_picto').css('background-position-x');
    bpx = remove_px($('#measuring_tape_rolling_picto').css('background-position-x'));
    $('#measuring_tape_numeric').text((bpx + parseInt($width) + 'mm'));
    $('#debug').val("validated");
 
    $('#measuring_tape_rolling_picto').bind("mouseover", function (e) {
        $('#mouseX').val(e.screenX);
        $('#measuring_tape_rolling_picto').bind("mousemove", function (e) {
            $oldMouseX = $('#mouseX').val();
            $newMouseX = e.screenX;
            $old_bpx_px = $('#measuring_tape_rolling_picto').css('background-position-x');
            old_bpx = remove_px($old_bpx_px);
            if (parseInt($oldMouseX) > parseInt($newMouseX)) {
                if ($('#measuring_tape_numeric').text() != "1mm")
                {
                    $('#measuring_tape_rolling_picto').css('background-position-x', '' + (old_bpx + 1) + 'px');
                    $a = ('' + ($width - (old_bpx + 1)));
                    $('#measuring_tape_numeric').text($a + 'mm');
                }
            } else if (parseInt($oldMouseX) < parseInt($newMouseX)) {
                if ($('#measuring_tape_numeric').text() != "1500mm")
                {
                    $('#measuring_tape_rolling_picto').css('background-position-x', '' + (old_bpx - 1) + 'px');
                    $a = ('' + ($width - (old_bpx - 1)));
                    $('#measuring_tape_numeric').text($a + 'mm');
                }
            }
            $('#mouseX').val($newMouseX);
        });
    });
    $('#measuring_tape_rolling_picto').bind("mouseout", function (e) {
        $('#measuring_tape_rolling_picto').unbind("mousemove"); 
    });
    $('#measuring_tape_numeric').bind("keydown", function (e) {
        if (e.keyCode >= 96 && e.keyCode <= 105)
        {
            $c = (parseInt(e.keyCode) - 96);
            if ($('#numeriX').val() == "ongoing")
            {
                alert($('#numeriX').val() + ' num ' + $c);
            }
            else
            {
                alert($('#numeriX').val() + ' num ' + $c);
                $('#numeriX').val("ongoing");
                $('#measuring_tape_numeric').text($c + 'mm');
            }
        }
        else if (e.keyCode == 13)
        {
        alert('enter'+e.keyCode);
        }
 
/*        if (e.keyCode >= 96 && e.keyCode <= 105)
        {
            $c = (parseInt(e.keyCode) - 96);
        alert($c);
            if ($('#debug').val() == "ongoing")
            {
                $before = remove_px($('#measuring_tape_numeric').text());
                $('#measuring_tape_numeric').text($before + $c + 'mm');
            }
            else
            {
                $('#measuring_tape_numeric').text($c + 'mm');
                $('#numeriX').val("ongoing");
            }
        }
        else if (e.keyCode == 13)
        {
        alert("enter");
            $('#numeriX').val("validated");
            $('#debug').val("validated");
            $('#measuring_tape_rolling_picto').css('background-position-x', '' + ($width - $('#numeriX').val()) + 'px');
        }*/
    });    
 
    function remove_px($string) {
        a = $string.indexOf("px");
        return parseInt($string.substring(0, a));
    }
    function remove_mm($string) {
        a = $string.indexOf("mm");
        return parseInt($string.substring(0, a));
    }
    function mm2cm($string) {
        l1 = $string.length();
        $b = $string.substring(0, l1-2);
        l2 = $b.length();
        $c = $b.substring(0, l2-1) + '.' + $b.substring(l2, 1) + 'cm';
        return $c;
    }
});

Loceka · 06/05/2011, 11h39

Bon chez moi j'ai pas jQuery (et j'ai pas le courage de le télécharger

) mais en retranscrivant ta fonction en javascript standard ça marche :

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
25
26
27
28
29
30
31
32
<html>
<head>
	<title>test</title>
	<script type="text/javascript">
	function test(e) {
		var lettre = String.fromCharCode(e.keyCode);
		if (lettre >= "A" && lettre <= "Z") {
			$c = (parseInt(e.keyCode) - 64);
			var num = document.getElementById("numeriX");
			if (num.value == "ongoing") {
				alert(num.value + ' num ' + $c);
			}
			else {
				alert(num.value + ' num ' + $c);
				num.value = "ongoing";
				document.getElementById('measuring_tape_numeric').firstChild.data = ($c + 'mm');
			}
		} else if (e.keyCode == 13) {
			alert('enter'+e.keyCode);
		}
	}
 
	</script>
</head>
<body>
	<div id="measuring_tape_fixed_picto"></div>
	<div id="measuring_tape_numeric" onkeydown="test(event)">
		<input type="text" value="div"/>
		<input type="hidden" id="numeriX" value="???"/>
	</div>
</body>
</html>

J'ai juste :

Ajouté un input dans le div pour que le focus puisse se faire sur le div (sinon la fonction n'est jamais appellée)
changé les keyCode par [65, 91] ("A", "Z") parce que je n'avais aucun moyen de rentrer un caractère entre 96 et 105 avec mon clavier. D'ailleurs j'ai un doute sur le fait que tu y arrives

quasinewbie · 06/05/2011, 11h39

C'est ici que ça se passe en réalité :
http://byanhor.free.fr/svgweb/sewing...ng-slicer.html

Quand je joue avec la souris sur le ruban mètre, ça met à jour le contenu de ma <div id="measuring_tape_numeric"> avec le nombre de mm

Réciproquement quand j'appuie sur une touche numérique sur ma <div id="measuring_tape_numeric"> je voudrais mettre à jour le background-position-x de mon ruban mètre.

Au premier appui (par ex. "5"), je passe la valeur de mon <input> "numeriX" à "ongoing" et le texte de ma <div id="measuring_tape_numeric"> à 5mm

Au second appui (par ex. "2"), la valeur de mon <input> "numeriX" reste à "ongoing" et le texte de ma <div id="measuring_tape_numeric"> passe à 52mm

Quand je fais "entrer" ça valide, et je passe la valeur de mon <input> "numeriX" à "done"

Problème donc dès le premier appui, $('#numeriX').val("ongoing"); ne marche pas, et je ne peux pas poursuivre avec un second chiffre.

Autre bizarrerie, mais qui est sans doute liée :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
  <div id="measuring_tape_cursor">
  	<input type="hidden" id="mouseX" value="mouseX"/>
  </div>
  <div id="measuring_tape_numeric">
  	<input type="hidden" id="numeriX" value="numeriX"/>
  </div>

Si je remplace le type="hidden" par type="text" la boite apparait bien pour l'input mouseX, mais si je fais de même avec l'input numeriX la boite reste désespérément invisible

quasinewbie · 06/05/2011, 11h40

Il y a eu téléscopage de message, je regarde ça, merci

quasinewbie · 06/05/2011, 11h48

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(document.getElementById('numeriX'));

Ca me donne 'null'

Loceka · 06/05/2011, 11h55

Ah

Ben je pense que l'explication est là alors. Il doit y avoir une faute de frappe quelque part (je n'ai pas accès aux pages free à cause du proxy d'entreprise...) ou bien tu supprimes ton div/input du DOM à un moment ou un autre.

Une autre possibilité est que tu génères dynamiquement (en javascript) ton input, ce qui a parfois pour effet (selon la méthode de génération et le navigateur) que les attributs ID ne sont pas pris en compte.

quasinewbie · 06/05/2011, 16h00

Eureka !! Bon, il m'en aura fallu du temps, mais si ça peut en aider d'autres :

Ligne 17 de mon javascript

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
    $('#measuring_tape_numeric').text((bpx + parseInt($width) + 'mm'));

avec ce code, le texte de ma <div> measuring_tape_numeric qui vallait ceci

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="measuring_tape_numeric">
       <input type="hidden" id="numeriX" value="???"/>
</div>

vaut après ça

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="measuring_tape_numeric">
       225mm;
</div>

l'input avait disparu

quasinewbie · 06/05/2011, 16h04

D'où une p'tite question subsidiaire :
Il y a un moyen propre de dire que j'ajoute du contenu texte à ma div, sans toucher à la sous-arborescence ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="id1">
  <nimpotequoi>
  </nimpotequoi>
</div>

devient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="id1">
  mon blabla
  <nimpotequoi>
  </nimpotequoi>
</div>

Bovino · 06/05/2011, 16h09

after(), append(), appendTo(), before()...

Loceka · 06/05/2011, 16h57

Bravo

Un jour quand je me mettrai au jQuery je serai capable de voir ce genre de choses. ^_^

06/05/2011, 11h48	#7
quasinewbie Invité de passage r&d Inscription : avril 2011 Messages : 13 Détails du profil Informations personnelles : Sexe : Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : r&d Informations forums : Inscription : avril 2011 Messages : 13 Points : 2 Points : 2	Code : Sélectionner tout - Visualiser dans une fenêtre à part alert(document.getElementById('numeriX')); Ca me donne 'null'
	00

06/05/2011, 16h09	#11
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 803 Points : 35 803	after(), append(), appendTo(), before()... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

06/05/2011, 11h00	#2
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	A priori il n'y a aucune raison pour que ça marche sur le debug et pas sur le numeriX. Tu peux faire voir le code qui fonctionne sur le debug ?
	00

06/05/2011, 11h40	#6
quasinewbie Invité de passage r&d Inscription : avril 2011 Messages : 13 Détails du profil Informations personnelles : Sexe : Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : r&d Informations forums : Inscription : avril 2011 Messages : 13 Points : 2 Points : 2	Il y a eu téléscopage de message, je regarde ça, merci
	00

06/05/2011, 11h55	#8
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	Ah Ben je pense que l'explication est là alors. Il doit y avoir une faute de frappe quelque part (je n'ai pas accès aux pages free à cause du proxy d'entreprise...) ou bien tu supprimes ton div/input du DOM à un moment ou un autre. Une autre possibilité est que tu génères dynamiquement (en javascript) ton input, ce qui a parfois pour effet (selon la méthode de génération et le navigateur) que les attributs ID ne sont pas pris en compte.
	00

06/05/2011, 16h57	#12
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	Bravo Un jour quand je me mettrai au jQuery je serai capable de voir ce genre de choses. ^_^
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email