Bonjour,

J'ai une page Web PHP HTML qui contient environ 130 <div>s dont je veux pouvoir faire parler le texte. J'aurais donc 4 boutons (Écoutez, Pause, Reprendre, Arrêter) pour chacune des ces <div>s.

Je suis bloqué dans ce code PHP JavaScript et je n'ai aucune idée de comment je peux trouver les erreurs. Je suis très novice en programmation: J'ai essayé de lire la section JavaScript le W3Schools.com, mais quoique que j'apprenne un peu, ça reste vague. Les boutons apparaissent normalement, mais quand je clique dessus, rien ne se produit. Je ne sais pas si mes fonction JS sont bien évoquées, ni si le code à l'intérieur des fonctions JS sont correctes. C'est le grand floue. J'ai essayé Examiné l'élément , console, de Firefox, mais je ne vois pas d'erreurs. Est-ce parce que je ne sais pas utiliser cet outils? Je ne travail que sur mon seul site Web personnel.

Code HTML généré de ma page PHP (Merci NoSmoking pour m'avoir écrit d'ajouter ce code généré):
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
17
18
<body>
 
	<div><button id="lectureObjectif">Écouter</button>&nbsp;<button id="pauseObjectif">Pause</button>&nbsp;<button id="reprendreObjectif">Reprendre</button>&nbsp;<button id="arretObjectif">Arrêtter</button></div>
	<!-- The div (with the Objectif id) to be spoken -->
	<div id="Objectif" class="moi-wrap-text">
		<p>L'objectif de ce site est important. </p>
	</div>
 
	<div><button id="lecturePourquoi">Écouter</button>&nbsp;<button id="pausePourquoi">Pause</button>&nbsp;<button id="reprendrePourquoi">Reprendre</button>&nbsp;<button id="arretPourquoi">Arrêtter</button></div>
	<!-- The div (with the Pourquoi id) to be spoken -->
	<div id="Pourquoi" class="moi-wrap-text">
		<p>Pourquoi est-il important de savoir.</p>
	</div>
 
	<!-- External JavaScript file -->
	<script src="deux.js" defer></script>
 
</body>
Contenu de mon fichier JavaScript
Code JavaScript : 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
// Fonction pour faire parler
function doLecture(textName) {
	/* Removes all utterances from the utterance queue and
	if an utterance is currently being spoken, speaking will stop */
	speechSynthesis.cancel();
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	parole.lang = 'fr-Fr'; // language, default is 'en-US'
	parole.pitch = 1; // 0 à 2 = hauteur
	parole.rate = 1.3; // 0.1 à 10 = vitesse
	parole.volume = 1; // 0 à 1 = volume
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Speak
	speechSynthesis.speak(parole);
}
 
// Fonction pour faire une pause
function doPause(textName) {
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Pause speaking
	speechSynthesis.pause(parole);
}
 
// Fonction pour reprendre le faire parler
function doReprendre(textName) {
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Resume speaking
	speechSynthesis.resume(parole);
}
 
// Fonction pour arrêter le faire parler
function doArret(textName) {
	// instancier un objet d'énonciation
	let parole = new SpeechSynthesisUtterance();
	// Get the DOM object
	parole.text = document.getElementById(textName).textContent;
	// Stop speaking
	speechSynthesis.stop(parole);
}

Contenu de mon fichier PHP (au cas où le problème viendrait, en parti, de là) :
Code PHP : 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
<?php 
 
//  id des "div"s à faire parler
$texts = ['Objectif', 'Pourquoi'];
 
$buttons = [];
$events = [];
 
foreach($texts as $text) {
    $buttons[$text] = make_buttons($text);
    $events[$text] = make_events($text);
}
 
	function make_buttons($textname) {
    $buttons = [];
    $buttons[] = '<button id="lecture' . $textname . '">Écouter</button>';
    $buttons[] = '<button id="pause' . $textname . '">Pause</button>';
    $buttons[] = '<button id="reprendre' . $textname . '">Reprendre</button>';
    $buttons[] = '<button id="arret' . $textname . '">Arrêtter</button>';
    return implode("&nbsp;", $buttons);
}
	function make_events($textname) {
    $clicks = [];
    $clicks[] = "document.getElementById('lecture{$textname}').onclick = doLecture('{$textname}');";
    $clicks[] = "document.getElementById('pause{$textname}').onclick = doPause('{$textname}');";
    $clicks[] = "document.getElementById('reprendre{$textname}').onclick = doReprendre('{$textname}');";
    $clicks[] = "document.getElementById('arret{$textname}').onclick = doArret('{$textname}');";
    return implode("\n", $clicks);			
}	
	$events = implode("\n", $events);
	?>
 
	<?php 	//  Apparition des boutons pour id "Objectif" à faire parler
	echo "<div>{$buttons['Objectif']}</div>";?>
 
	<!-- Le div avec l'id "Objectif" -->
	<div id="Objectif" class="moi-wrap-text">
		<p>L'objectif de ce site est important. </p>
	</div>
 
	<?php 	//  Apparition des boutons pour id "Pourquoi" à faire parler
	echo "<div>{$buttons['Pourquoi']}</div>";?>
 
	<!-- Le div avec l'id "Pourquoi" -->
	<div id="Pourquoi" class="moi-wrap-text">
		<p>Pourquoi est-il important de savoir?</p>
	</div>