Passage de paramètre

**chrtophe** · 20/08/2022, 20h29

J'ai un problème de passage de paramètre à une fonction que j'utilise pour un onclick.
Avec la chaine de caractère "avant la fin de l'année", la fonction ne se déclenche pas.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
...
 <script language="Javascript">
         function test(identifiant)
         {
             alert("test 1");             
         }
 </script>
...
 
<td><button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#dialogue' onclick=test('avant la fin de l'année');>test</td>

Je réussis à contourner le problème en remplaçant les espaces par des   et en échappant l'apostrophe
chaine fonctionnant :
'avant la fin de l\'année'

Je ne maitrise pas Javascript.

Pour l'apostrophe, je comprends qu'il doive être échappé, mais pour les espaces comment ça se fait ?

**mathieu** · 21/08/2022, 08h52

plusieurs conseils pour le code html

utilisez les mêmes guillemets pour tous les attributs de tous les éléments
fermez la balise "<button>"

ensuite pour le javascript, vous pouvez séparer le code html et le code javascript en ajoutant un identifiant au bouton. dans mon code à la suite, j'ai mis le code javascript dans une balise "script" pour l'exemple mais cette séparation vous permettra de mettre le code javascript dans un fichier séparé.

et donc avec ces modifications, le code ressemblera à ça :

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
 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dialogue" id="bouton_dialogue">test</button>
 
<script>
"use strict";
 
const message = "avant la fin de l'année";
const bouton_dialogue = document.getElementById("bouton_dialogue");
 
bouton_dialogue.addEventListener("click", e => {
 
	alert(message);
 
});
 
</script>

**chrtophe** · 21/08/2022, 09h50

Merci pour la réponse.

fermez la balise "<button>"

En effet, simple oubli.

utilisez les mêmes guillemets pour tous les attributs de tous les éléments

Ce n'est pas ce que j'ai fait ? du moins dans la ligne button.

J'aoute que ma ligne <button> est encapsulée dans du PHP d’où la non utilisation de " partout m'ayant oublié à devoir échapper mon texte pour l'apostrophe.
Mon texte normalement contenu dans une variable PHP, le code présenté a été récupéré depuis "afficher la source".

Je ne vais pas exploiter le code fourni, je vais avoir plusieurs fois le bouton, le javascript me permettant de changer le contenu de la fenêtre modale selon le bouton cliqué.

Ce qui me pose problème, c'est que je doive remplacer les espaces par des   dans la chaine passée en paramètre à la fonction Javsacript, sinon, celle-ci ne se déclenche pas. Je ne comprend pas pourquoi.

**mathieu** · 21/08/2022, 10h34

en php aussi il vaut mieux séparer au maximum le code html du code php.
si vous avez par exemple plusieurs éléments en php, ça donnerai quelque chose comme cela :

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
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
<?php
 
$messages = [
        "m1" => [
                "libelle_bouton" => "test message 1",
                "message" => "avant la fin de l'année",
        ],
        "m2" => [
                "libelle_bouton" => "test message 2",
                "message" => "peut-être",
        ],
        
];
 
 
?>
<html>
<body>
 
<?php foreach ($messages as $code_message => $tab_message) {?>
 
	<button
		type="button" class="btn btn-primary dialogue"
		data-bs-toggle="modal" data-bs-target="#dialogue"
		data-code-message="<?php echo htmlspecialchars($code_message);?>"
	>
		<?php echo htmlspecialchars($tab_message["libelle_bouton"]);?>
	</button>
 
<?php }?>
 
 
<script>
// le contenu de cette balise "script" est dans le code html
"use strict";
 
const donnees = <?php echo json_encode($messages)?>;
</script>
 
 
<script>
// le contenu de cette balise "script" est dans un fichier à part
"use strict";
 
const boutons_dialogue = Array.from(document.getElementsByClassName("btn dialogue"));
 
boutons_dialogue.forEach(bouton => {
 
	bouton.addEventListener("click", e => affiche_message(e));
 
});
 
 
function affiche_message(clic)
{
 
	const code_message = clic["target"]["dataset"]["codeMessage"];
 
	alert(donnees[code_message]["message"]);
 
}
 
</script>
 
 
</body>
</html>

**Archimède** · 21/08/2022, 11h04

Bonjour,
le souci dans ton code, c'est que ta chaîne de caractères possède une apostrophe et dans ce cas il est impératif d'entourer cette chaîne de caractères par des doubles quotes (guillemets) sinon tu pourras mettre des simples quotes ou doubles quotes, c'est la même chose...

sinon, si tu veux absolument un paramètre à ta fonction, tu peux faire ceci en autres...:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 <button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#dialogue' id='bouton_dialogue'>test</button>
    <script>
        function test(text) {
            alert(text);
        }
 
        const bouton_dialogue = document.getElementById('bouton_dialogue');
        bouton_dialogue.addEventListener('click', function() {
            test("avant la fin de l'année");
        });
    </script>

**chrtophe** · 21/08/2022, 12h03

ma chaine est contenue dans une variable PHP.
en appliquant :

Code :

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

1
2
3
 
$var_reponse1=str_replace(" ","&nbsp;",$var_reponse1);
$var_reponse1=addslashes($var_reponse1);

Je n'ai pas de prob. la fonction Javascrip se déclenche. Si je commentes la 1ère ligne, ça ne fonctionne plus. C'est ça que je piges pas.

**NoSmoking** · 31/08/2022, 18h26

Bonjour,
en absence de quotte autour de la valeur de l'attribut onclick celui-ci est incomplètement construit.
Ta ligne

Code html :

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

<button type='button' class='btn btn-primary' onclick=test('avant la fin de l'année');>test</button>

sera interprétée par le navigateur comme étant :

Code html :

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

<button type="button" class="btn btn-primary" onclick="test('avant" la="" fin="" de="" l'année');="">test</button>

... les espaces sont considérés comme des délimiteurs : 13.1.2.3 Attributes.

Il te faudrait faire quelque chose comme :

Code html :

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

1
2
3
4
<?php
$msg = 'avant la fin de l\'année';
?>
<button type="button" class="btn btn-primary" onclick="test('<?php echo $msg ?>');">test</button>

Tu peux vérifier la décomposition des attributs en lançant le code suivant ce petit script :

Code :

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

1
2
3
4
5
6
7
8
const output = [];
for (const attr of elementBUTTON.attributes){
  output.push({
    attr: attr.name,
    value: attr.value
  })
}
console.log("attributs = ", JSON.stringify(output, null, 2));

et tu devrais obtenir quelque chose comme :

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
33
34
35
36
37
38
attributs =  [
  {
    "attr": "type",
    "value": "button"
  },
  {
    "attr": "class",
    "value": "btn btn-primary"
  },
  {
    "attr": "data-bs-toggle",
    "value": "modal"
  },
  {
    "attr": "data-bs-target",
    "value": "#dialogue"
  },
  {
    "attr": "onclick",
    "value": "test('avant"
  },
  {
    "attr": "la",
    "value": ""
  },
  {
    "attr": "fin",
    "value": ""
  },
  {
    "attr": "de",
    "value": ""
  },
  {
    "attr": "l'année');",
    "value": ""
  }
]

Ne pas non plus négliger le passage au validateur qui sera riche d'enseignement !

**chrtophe** · 31/08/2022, 19h55

... les espaces sont considérés comme des délimiteurs : 13.1.2.3 Attributes.

Donc l'explication est là.

Merci à tous.

Passage de paramètre

JavaScript

Discussions similaires

Partager

Partager