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>
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
-
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-
-
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 -
-