Passage de paramètre

Version imprimable

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:

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 ?

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:

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>

21/08/2022, 09h50
Christophe

Merci pour la réponse.

Citation:

fermez la balise "<button>"

En effet, simple oubli.

Citation:

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.

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:

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>

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:

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>

21/08/2022, 12h03
Christophe
ma chaine est contenue dans une variable PHP.
en appliquant :
Code:

1 2 3 $var_reponse1=str_replace(" "," ",$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.

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

Code:

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

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

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:

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:

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 !

31/08/2022, 19h55
Christophe

Citation:

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

Donc l'explication est là.

Merci à tous.