4
votes

Comment additionner diverses valeurs stockées dans un champ de texte?

J'essaie de créer une application Web très simple.

Je veux que les valeurs d'un champ de texte soient stockées après avoir appuyé sur un bouton, et qu'elles soient ajoutées.

Par exemple, si je tapé 3, cliqué sur Soumettre, puis 5, cliqué sur Soumettre, puis 2, je voudrais que le résultat soit 10, mais je ne sais pas comment faire.

<style media="screen">
    .error {
      display: none;
    }
    .number {
      display: none;
    }
  </style>

<body>
  <form>
    <label for="numberInput">Write a number: </label>
    <input type="text" name="numberInput" class="numberInput" id="numberInput">
    <button type="button" name="submitBtn" class="submitBtn" id="submitBtn">Submit</button>
    <div id="error" class="error">
    </div>
    <div id="number" class="number">
    </div>
    <script type="text/javascript">
      $("#submitBtn").on("click", function() {
        if ($("#numberInput").val() != "") {
          $("#error").hide();
          $("#error").text("");
          var storedValue = $("#numberInput").val();
          $("#number").show();
          $("#number").text(storedValue);
        } else {
          $("#error").show();
          $("#error").text("Please complete the above field.");
        }
      });
    </script>

Si je devais taper 5 puis 2, je m'attends à ce que le résultat soit 7, cependant, le résultat réel qui apparaît est 2.

p >

javascript jquery

0 commentaires

5 Réponses :

-1
votes

Je voudrais ajouter à un tableau

numbers.forEach(function(element) {
  total += element;
});

puis une fois qu'ils ont frappé le bouton d'envoi en boucle sur le tableau et ajoutent les valeurs

numbers.push($("#numberInput").val());

vous devrez déclarer le total en dehors de la boucle, et vous devrez peut-être convertir les éléments du tableau en un nombre en utilisant parseInt (élément)

0 commentaires

-1
votes

Vous devez stocker le dernier résultat ajouté.

<input type='input' id='input' value=''>
<input type='button' onclick='handleInput()'>

let globalValue = 0;

function handleInput(){
   let newInput = document.getElementById('input').value;
   globalValue += Number( newInput ) || 0;
   console.log( globalValue )
}

0 commentaires

0
votes

Avec quelques modifications de votre code, cela peut être fait comme ci-dessous:

<html>
<head>
<style media="screen">
    .error {
      display: none;
    }
    .number {
      display: none;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
  <form>
    <label for="numberInput">Write a number: </label>
    <input type="hidden" id="hiddenTotal" value="0" />
    <input type="text" name="numberInput" class="numberInput" id="numberInput">
    <button type="button" name="submitBtn" class="submitBtn" id="submitBtn">Submit</button>
    <div id="error" class="error">
    </div>
    <div id="number" class="number">
    </div>
    <script type="text/javascript">
        var total = 0;
      $("#submitBtn").on("click", function() {
        if ($("#numberInput").val() != "") {
          $("#error").hide();
          $("#error").text("");
          total = parseInt($("#hiddenTotal").val());          
          var inputValue = $("#numberInput").val();
          total = total + parseInt(inputValue);
          $("#hiddenTotal").val(total);

          if(total > 0)
          {
            $("#number").show();
            $("#number").text(total);
          }
        } else {
          $("#error").show();
          $("#error").text("Please complete the above field.");
        }
      });
    </script>
</html>

0 commentaires

1
votes

JavaScript:

Ajoutez une valeur par défaut 0 dans votre div #number pour y ajouter un numéro d'entrée plus tard.
Attribuez l ' entrée , le bouton , le #number div et le div #error à la variable input , btn , result et error respectivement.
Ajoutez un écouteur d'événement click à votre variable btn qui exécute une fonction, par exemple Calculate () .
Dans la fonction, ajoutez une instruction if qui vérifie si l'entrée a une valeur et si la valeur d'entrée est un nombre.
Si les deux conditions ne sont pas remplies, ajoutez une erreur telle que "Veuillez saisir un nombre valide" dans votre div #error mais si les deux conditions sont remplies, analysez la valeur d'entrée en un entier et ajoutez-le au numéro analysé actuel à l'intérieur de votre #number div et remplacez le nombre à l'intérieur de votre #number div par le nouveau nombre ajouté.

Vérifiez et exécutez l ' extrait de code suivant pour un exemple pratique de ce qui précède:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <label for="numberInput">Write a number: </label>
  <input type="text" name="numberInput" class="numberInput" id="numberInput">
  <button type="button" name="submitBtn" class="submitBtn" id="submitBtn">Submit</button>
  <div id="number" class="number">0</div>
  <div id="error" class="error"></div>
</form>

function calculate() {
    if ($("#numberInput").val() && !isNaN($("#numberInput").val())) {
      $("#error").html("");
      $("#number").html(parseInt($("#number").text()) + parseInt($("#numberInput").val()));
    } else {
        $("#error").html("Please enter a valid number");
    }
}

$("#submitBtn").click(calculate);

jQuery:

Personnellement, je préfère le JavaScript pur à jQuery, mais si vous voulez une version jQuery de ce qui précède, vous pouvez vérifier et exécuter le extrait de code strong> ci-dessous:

<!-- HTML -->

<form>
  <label for="numberInput">Write a number: </label>
  <input type="text" name="numberInput" class="numberInput" id="numberInput">
  <button type="button" name="submitBtn" class="submitBtn" id="submitBtn">Submit</button>
  <div id="number" class="number">0</div>
  <div id="error" class="error"></div>
</form>

/* JavaScript */

var input = document.getElementById("numberInput");
var btn = document.getElementById("submitBtn");
var result = document.getElementById("number");
var error = document.getElementById("error");

function calculate() {
    if (input.value && !isNaN(input.value)) {
      error.innerHTML = "";
      result.innerHTML = parseInt(result.innerHTML) + parseInt(input.value);
    } else {
        error.innerHTML = "Please enter a valid number";
    }
}

btn.addEventListener("click", calculate);

0 commentaires

2
votes

Je viens de modifier légèrement votre code (toutes les modifications sont signalées par des commentaires).

À noter:

Si vous faites de storedValue une variable globale et l'initialisez à 0, vous pouvez continuer à y ajouter la valeur #numberInput à chaque fois que le formulaire de la soumission précédente sera conservé). Remarque: storedValue sera remis à 0 à chaque fois que vous rechargez la page.
Vous devez convertir la valeur numberInput en un entier, sinon elle sera interprétée comme une chaîne et les calculs numériques que vous effectuez ne fonctionneront pas comme prévu.

De plus, je ne vois pas de balise de fermeture pour le formulaire dans votre code, alors je l'ai ajouté.

<!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    <style media="screen">
       .error {
          display: none;
        }
        .number {
          display: none;
      }
    </style>
    <script src="jquery.min.js"></script>

    </head>
      <body>
        <form>
          <label for="numberInput">Write a number: </label>
          <input type="text" name="numberInput" class="numberInput" id="numberInput">
          <button type="button" name="submitBtn" class="submitBtn" id="submitBtn">Submit</button>

        </form>
        <div id="error" class="error">
        </div>
        <div id="number" class="number">
        </div>

        <script type="text/javascript">
          //create a global variable so we can keep values stored from previous form submissions.
          //initialize it to 0. Therefore everytime the page reloads the value will
          //reset to 0.
          var storedValue = 0;

          $("#submitBtn").on("click", function() {
            if ($("#numberInput").val() != "") {
              $("#error").hide();
              $("#error").text("");
              //we need to cast the input value to an int otherwise it will be 
              //interpreted as a string.
              //add the input value to the current storedValue.
              storedValue = storedValue + parseInt($("#numberInput").val());
              $("#number").show();
              $("#number").text(storedValue);
            } else {
              $("#error").show();
              $("#error").text("Please complete the above field.");
            }
          });
        </script>
      </body>
    </html>

0 commentaires