Incompatibilité entre formulaire et onclick indépendant ?

Résolu

bl-40 - Modifié le 13 juil. 2022 à 10:33
bl-40 - 13 juil. 2022 à 22:50

Bonjour,

Je souhaite créer une dictée de mots.
Le principe est simple : je propose 4 mots, avec pour chacun, un bouton pour commander à l'ordinateur de le dire à l'oral. La personne tape alors le mot dans un champ texte à côté. Quand la personne a tapé au clavier les 4 mots dans les champs textes associés, il doit alors alors appuyer sur la touche "Envoyer" du formulaire pour que les réponses soient transmises à un fichier "Resultat.php", qui traitera les réponses.

Mon problème vient du "button onclick" utilisé dans le programme ci-dessous : quand j'appuie sur un des boutons commandant à l'ordinateur de dire un mot à l'oral, l'ordinateur dit bien le mot, mais cela lance aussi le fichier "Resultat.php", alors que je n'ai pas appuyé sur le bouton "Envoyer" du formulaire.
Je ne comprends pas ce qui pose problème. Quelqu'un aurait-il une solution ?

Code du programme posant problème :
(remarque : le programme de base est beaucoup plus étoffé (base de données MySQL, PHP), mais je l'ai simplifié ici pour pouvoir zoomer uniquement sur le problème)

<!DOCTYPE html>
<html>

<head>
    <title>Dictée de mots</title>
        
    <script language="JavaScript" type="text/javascript">
    function parle(texte) {  
    var message = new SpeechSynthesisUtterance(texte);
    message.lang = "fr-FR";
    window.speechSynthesis.speak(message);
    }  
    </script>
</head>
    

 <body>

        <form method="post" action="Resultat.php" target=_blank>

        Mot n°1 :          
        <button onclick = 'parle("une chaise")'>Écouter</button>
            
        <input type="text" name="repa" size="50" />
        <br/><br/><br/>

        Mot n°2 :          
        <button onclick = 'parle("une table")'>Écouter</button>
            
        <input type="text" name="repb" size="50" />
        <br/><br/><br/>

        Mot n°3 :          
        <button onclick = 'parle("une craie")'>Écouter</button>
            
        <input type="text" name="repc" size="50" />
        <br/><br/><br/>

        Mot n°4 :          
        <button onclick = 'parle("un cartable")'>Écouter</button>
            
        <input type="text" name="repd" size="50" />
        <br/><br/><br/>

        <input type="submit" value="Envoyer" />
        </form>
</body>
    
</html>

A voir également:

Independant bariable
What is an independant bariable - Meilleures réponses
Onclick in html - Meilleures réponses
Design travailleur indépendant - Forum Graphisme/design
Exe indépendant ✓ - Forum Visual Basic
Loader indépendant AS3 ✓ - Forum Flash
Linux/Processus indépendant - Forum C
Canvas indépendant pour Composant - Forum Delphi / Pascal

2 réponses

Réponse 1 / 2

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
13 juil. 2022 à 10:38

bonjour essai en rajoutant un preventDefault() a la fonction

function parle(texte,evt) {

    evt.preventDefault()

    var message = new SpeechSynthesisUtterance(texte);
    message.lang = "fr-FR";
    window.speechSynthesis.speak(message);
    }

 <button onclick = 'parle("une table",event)'>Écouter</button>

Réponse 2 / 2

bl-40
13 juil. 2022 à 22:50

Bonjour,
Effectivement, ça marche maintenant !
Merci beaucoup pour le dépannage :)
Je craignais de rester bloqué à cause de ce problème.

Discussions similaires

as indépendant

Exexcutable indépendant

OptionButton indépendant les uns des autres

Navigateur web indépendant !?!

Utiliser le nom d'une variable

Votre réponse

Discussions similaires