Je suis reparti de tout ce que tu as fait mais il y a moyen de factoriser encore plus, notamment si tu génères ton html directement depuis le javascript avec innerHTML.
Je t'ai commenté le script, je te met en dessous le html à peine modifié (il y a les commentaire dans le script js qui t'explique ce que j'ai modifié.
Je te le dit, on peut faire mieux, mais ce qui doit t'intéresser c'est la logique de factorisation.
Dans ton code, des choses se répète comment faire pour que ce ne soit plus le cas.
En gros, pour l'avenir, sache que quand tu fais ctrl + C et ctrl + V, c'est qu'il y a un problème. C'est pour ça d'ailleurs que je dis que ce code est encore factorisable et peut être améliorer, parce que j'ai fais du copier coller sur quelques lignes. Bref:
/*
Je vais repartir de ton idée:
- Chaque boutton de 0 à 9 et le "dot" ajoute un élément à une string
- Quand on click sur une opération, on converti cette string en nombre, on retient le nombre et le type d'opération cliqué
- Quand on click sur égal, on récupère le nombre et le type d'opération retenu puis on exécute l'opération
Mais du coup on va attribuer deux nouvelles classes dans le html:
- "write" pour tout ce qui ajoute des éléments à la string
- "set" pour tout ce qui converti en nombre et sauvegarde un résultat
"Delete" est un set, il converti une constante "0" et retient l'opération null ce qui va annuler les sauvegardes précédente
"C" est un write il écrit "" dans la chaîne actuelle ce qui a pour effet de la vider
"CE" est un write il écrit string - le dernier caractère ce qui a pour effet d'annuler la dernière entrée
"=" est un peu particulier, on ne va lui donner aucune de ces deux classes mais on va le retenir depuis son id
Je vais renommer les id de "C", "CE" et "Delete" en "C", "CE" et "Delete", je ne me tromperais pas sur qui fait quoi.
Je ne vais rien changer d'autre concernant le html pour l'instant ... mais bon, en vrai comme le html est très répétitif j'aurais
très envie de le générer directement avec du js.
*/
const resultat = document.getElementById('resultat')
let operande_a = 0;
let operation = null;
let currentInput = "";
// La fonction qui doit changer le contenu de resultat pour afficher la currentInput
function render(){
resultat.textContent = currentInput
}
// La fonction qui se déclenchera sur le clique d'un élément "write"
function writeOnClick(e){
switch(e.target.id){
case "C": // si C alors vider la chaine
currentInput = ""
break;
case "CE": // si CE alors copier la chaine jusqu'à l'avant dernier élement
currentInput = currentInput.slice(0, currentInput.length -2)
break;
default: // autrement, on ajoute la valeur actuelle à la chaine
currentInput = currentInput + e.target.textContent
}
render()
}
// La fonction qui se déclenchera sur le clique d'un élément "set"
function setOnClick(e){
switch(e.target.id){
case "Delete": // si delete on vide tout
operande_a = 0
currentInput = ""
operation = null
break;
default: // autrement on rempli
operande_a = Number(currentInput)
currentInput = ""
operation = e.target.textContent
}
render()
}
// La fonction qui se déclenchera sur le clique d'"égal"
function egalOnClick(e){
switch(operation){
case "+":
currentInput = operande_a + Number(currentInput) + "";
break;
case "-":
currentInput = operande_a - Number(currentInput) + "";
break;
case "*":
currentInput = operande_a * Number(currentInput) + "";
break;
case "/":
currentInput = operande_a * Number(currentInput) + "";
break;
}
render()
}
// La fonction qui va maintenant attacher les events aux éléments du dom
function setDigit(){
const writeDOM = document.getElementsByClassName("write")
const setDOM = document.getElementsByClassName("set")
for(let i = 0; i < writeDOM.length; i++){
writeDOM[i].addEventListener("click", writeOnClick)
}
for(let i = 0; i < setDOM.length; i++){
setDOM[i].addEventListener("click", setOnClick)
}
document.getElementById("egal").addEventListener("click", egalOnClick)
}
setDigit()
ps: Je te le dis aussi mais ne t'en inquiète pas, lis le, oublie le et ça fera sans doute écho plus tard à des choses que tu liras => En règle général on ne récupère pas des valeurs utiles depuis textContent. Le moteur informatique, ton code, ne doit pas se servir de l'affichage pour fonctionner. Dans le cas d'HTML, on préfère donc retenir les valeurs utiles dans des attributs, on récupère 2 parce que button.id = 2 mais pas parce que button.textContent = 2
Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.
Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre. En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.
Au lieu de déterrer un sujet il est préférable :
soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
soit de créer un nouveau sujet décrivant votre propre contexte
ne pas répondre à un déterrage et le signaler à la modération
Je ferme ce sujet. En cas de désaccord, me contacter par MP.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)