Calculatrice en javascript

Bonjour,

Je cherche à développer une calculatrice en javascript, elle marche correctement mais je n'arrive pas à la réinitialiser grace au bouton "C".
Pourriez vous m'indiquer la marche à suivre?

mon code :

<div class="container">
<div class="row">
<div class="col-4">

<input type="text" id="resultat" class="w-100">
<table class="table table-dark">
<thead>
<tr>
<td><button type="button" class="btn btn-dark" onclick="">M+</button></td>
<td><button type="button" class="btn btn-dark" onclick="">M-</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('%');">%</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('/')">/</button></td>
</tr>
</thead>
<tr>
<td><button type="button" class="btn btn-dark" onclick="calcul('1');">1</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('2');">2</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('3')">3</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('*')">*</button></td>
</tr>
<tr>
<td><button type="button" class="btn btn-dark" onclick="calcul('4')">4</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('5')">5</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('6')">6</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('-');">-</button></td>
</tr>
<tr>
<td><button type="button" class="btn btn-dark" onclick="calcul('7')">7</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('8')">8</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('9')">9</button></td>

<td><button type="button" class="btn btn-dark" onclick="calcul('+');">+</button></td>
</tr>
<tr>
<td><button type="button" class="btn btn-dark" onclick="calcul('.')">.</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcul('0')">0</button></td>
<td><button type="button" class="btn btn-dark" onclick="calcu('C');">C</button></td>
<td><button type="button" class="btn btn-dark" onclick="result('=');">=</button></td>
</tr>
</table>

<script>
// converti la chaine + produit le resultat

function result() {
resultat = document.getElementById('resultat').value;
resultatEval = eval(resultat);
document.getElementById('resultat').value = resultatEval;

// console.log(eval(document.getElementById('resultat').value))
}

function calcul(variable) { // fait la concatenation de la chaine
document.getElementById('resultat').value += variable;
}

</script>

3 réponses

  1. Bonjour,

    Je ne comprends pas où tu t'attendais à ce qu'il y ait une action.
    Tu concatènes toutes les entrées dans une chaîne, puis tu la calcules ; en mettant juste C là où on en était !
    Du coup tu vas avoir une chaîne du genre 1+1+C et tu t'attends à ce que ça comprenne tout seul que le C signifie « on annule tout » ?

    Tu vois bien que c'est un comportement spécifique qu'il faut coder.
    Donc plutôt que calcul('C'), il faut appeler une nouvelle fonction, du genre « reset », qui aura pour effet de remettre « document.getElementById('resultat').value » à vide...

    Xavier
    1. j'ai essayé de remplacer calcul par reset, de mettre un type reset à mon bouton.
      J'ai aussi essayé une fonction avec document.getElementById("C").reset();
      une autre avec document.getElementById("C").value = "";
      j'ai tenté une variable "C" = "":
      rien de ce que j'ai tenté n'a marché.
    2. Essaie plutôt comme ça :
      Dans l'html :
      <td><button type="button" class="btn btn-dark" onclick="reset();">C</button></td> 
      

      Puis dans le js :
      function reset() { // réinitialise la chaine
          document.getElementById('resultat').value = "";
      } 
      


      Si tu as besoin d'explications, n'hésite pas à me demander.

      Xavier
    3. ca marche parfaitement, merci beaucoup à toi.