Affichage résultat JavaScript zone de texte

**s.brahim** · 20/09/2022, 19h28

Bonjour,
j'ai écrit le code suivant:

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function afficher()
        {
            var num1=Number(document.form1.num1.value);
            var num2=Number(document.form1.num2.value);
            console.log(num1+num2);
            document.form1.res.value=num1+num2;
           // document.write(num1+num2);
        }
    </script>
</head>
<body>
   <form name="form1">
    <table>
        <tr>
            <td><label for="">Entrer  nombre 1:</label> </td>
            <td><input type="text" name="num1"></td>
        </tr>
        <tr>
            <td><label for="">Entrer  nombre 2:</label> </td>
            <td><input type="text" name="num2"></td>
        </tr>
        <tr>
            <td><label for="">Résultat:</label></td>
            <td><input type="text" name="res"></td>
        </tr>
        <tr >
<td colspan="2"><button onclick="afficher();">Calculer</button></td>
        </tr>
    </table>
  </form>
</body>
</html>

il ne contient aucune erreur, sauf que le résultat s'affiche pour un court temps et les zones de texte s'initialisent et se remettent à 0
Merci pour votre aide

**ProgElecT** · 20/09/2022, 20h13

Salut
Ligne 36, précise le type du bouton

Code html :

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

<td colspan="2"><button type="button" onclick="afficher();">Calculer</button></td>

sinon par défaut le bouton est du type submitdonc l'affichage est fait mais le Form se recharge est efface donc le résultat.

**domi65** · 20/09/2022, 20h28

En effet, un élément button soumet par défaut le formulaire.
Donc soit faire comme ProgElect, c'est à dire ajouter l'attribut type="submit", soit utiliser plus simplement un input de type button

Code HTML :

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

<input type="button" onclick="afficher()" value="Calculer">

L'élément button a un intérêt lorsqu'on veut insérer autre chose qu'un nœud texte à l'intérieur.

**NoSmoking** · 21/09/2022, 10h07

Bonjour,

Envoyé par domi65

Donc soit faire comme ProgElect, c'est à dire ajouter l'attribut type="submit"...[/CODE]

Je pense que tu voulais écrire type="button".

Envoyé par domi65

L'élément button a un intérêt lorsqu'on veut insérer autre chose qu'un nœud texte à l'intérieur.

Par contre là je ne saisi pas bien le sens de la phrase

**domi65** · 21/09/2022, 10h17

Of course, je voulais écrire button ! ;-)

Dans un élément a, un lien, on peut insérer une image. L'utilisateur clique donc sur l'image.

On peut faire la même chose avec une balise button. L'événement lié au bouton pourra donc être lancé par le clic sur une image.

Dans ce cas, l'utilisation d'une balise button sera appropriée (et même obligatoire). Sinon, si c'est juste pour afficher l'attribut value d'un input de type button, autant utiliser celui-ci.

Affichage résultat JavaScript zone de texte

JavaScript

Vue hybride

Discussions similaires

Partager

Partager