3
votes

Pourquoi la valeur des éléments d'entrée ne change pas?

J'apprends Javascript et en ce moment j'essaye de créer une calculatrice simple.

J'ai ajouté quatre boutons pour les opérations arithmétiques de base et trois éléments d'entrée.

J'ai attaché eventListener à chaque bouton. Le problème auquel je suis confronté est que lorsque je saisis deux nombres et clique sur l'un des quatre boutons, je peux voir le résultat pendant seulement une demi-seconde, puis chaque valeur d'entrée disparaît.

Voici le code.

<body>
  <h1>SIMPLE CALCULATOR</h1>
  <form>
    <label for="first">Number 1:</label>
    <input id="first" type="text" value="">
    <br><br>

    <label for="second">Number 2:</label>
    <input type="text" value="" id="second">
    <br><br>

    <label for="result">Result :</label>
    <input type="text" value="" id="result">
    <br><br>

    <button id="ADD">ADD</button>
    <button id="SUB">SUB</button>
    <button id="MUL">MUL</button>
    <button id="DIV">DIV</button>
  </form>
</body>

body {
  text-align: center;
}

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});

javascript html css

1 commentaires

Vous n'avez pas besoin de la balise form dans ce cas. Donc, comme alternative à ce que les réponses ci-dessous vous montrent, vous pouvez également simplement supprimer la balise form.

5 Réponses :

4
votes

C'est parce que c'est une forme. Ajoutez un écouteur d'événements pour vous assurer que le formulaire n'actualise pas la page (action par défaut lorsque action n'est pas donnée ou n'est pas valide):

document.querySelector("form").addEventListener("submit", e => e.preventDefault());

2 commentaires

Pourriez-vous s'il vous plaît expliquer le e => e.preventDefault ()

Prenez le paramètre e (l'objet événement comme argument) - => (fonction de flèche) - e.preventDefault () (empêche la valeur par défaut action de l'objet événement, dans ce cas soumission de formulaire).

1
votes

Vous pouvez ajouter à votre formulaire une action action = "javascript: void (0);"

<label for="first">Number 1:</label>
<input id="first" type="text" value="">
<br><br>

<label for="second">Number 2:</label>
<input type="text" value="" id="second">
<br><br>

<label for="result">Result :</label>
<input type="text" value="" id="result">
<br><br>

<button id="ADD">ADD</button>
<button id="SUB">SUB</button>
<button id="MUL">MUL</button>
<button id="DIV">DIV</button>

body {
  text-align: center;
}

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});

Je ne pense pas que dans ce cas vous ayez même besoin d'une balise form, vous pouvez simplement le faire sans:

<form action="javascript:void(0);">
  <label for="first">Number 1:</label>
  <input id="first" type="text" value="">
  <br><br>

  <label for="second">Number 2:</label>
  <input type="text" value="" id="second">
  <br><br>

  <label for="result">Result :</label>
  <input type="text" value="" id="result">
  <br><br>

  <button id="ADD">ADD</button>
  <button id="SUB">SUB</button>
  <button id="MUL">MUL</button>
  <button id="DIV">DIV</button>

</form>

body {
  text-align: center;
}

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});

0 commentaires

3
votes

Ajoutez simplement type = "button" dans les données

<body>
  <h1>SIMPLE CALCULATOR</h1>
  <form>
    <label for="first">Number 1:</label>
    <input id="first" type="text" value="">
    <br><br>

    <label for="second">Number 2:</label>
    <input type="text" value="" id="second">
    <br><br>

    <label for="result">Result :</label>
    <input type="text" value="" id="result">
    <br><br>

    <button type="button" id="ADD">ADD</button>
    <button type="button" id="SUB">SUB</button>
    <button type="button" id="MUL">MUL</button>
    <button type="button" id="DIV">DIV</button>
  </form>
</body>

body {
  text-align: center;
}

var res = document.getElementById('result');

document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
});

document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
});

document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
});

document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
});

0 commentaires

1
votes

Vous devez supprimer la balise html "form". Le formulaire est soumis après que vous ayez cliqué sur un bouton, le résultat est donc effacé.

0 commentaires

2
votes

Puisque votre balisage se trouve dans l'élément form , cliquer sur le bouton soumettra le formulaire. supprimez form ou ajoutez event.preventDefault (); à l'intérieur de l'événement de clic;

<body>
  <h1>SIMPLE CALCULATOR</h1>
  <form>
    <label for="first">Number 1:</label>
    <input id="first" type="text" value="">
    <br><br>

    <label for="second">Number 2:</label>
    <input type="text" value="" id="second">
    <br><br>

    <label for="result">Result :</label>
    <input type="text" value="" id="result">
    <br><br>

    <button id="ADD">ADD</button>
    <button id="SUB">SUB</button>
    <button id="MUL">MUL</button>
    <button id="DIV">DIV</button>
  </form>
</body>

body {
  text-align: center;
}

var res = document.getElementById('result');
document.getElementById('ADD').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 + num2;
  event.preventDefault();
});
document.getElementById('SUB').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 - num2;
  event.preventDefault();
});
document.getElementById('MUL').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 * num2;
  event.preventDefault();
});
document.getElementById('DIV').addEventListener('click', function() {
  var num1 = parseFloat(document.getElementById('first').value);
  var num2 = parseFloat(document.getElementById('second').value);
  res.value = num1 / num2;
  event.preventDefault();
});

0 commentaires