Édition avec recalcul dans un calculateur de produits en JavaScript
Affinons maintenant la fonction allowEdit
pour qu'elle effectue le recalcul décrit dans la leçon
précédente.
À ce stade, le code de votre fonction devrait ressembler à ceci :
function allowEdit(td) {
td.addEventListener('dblclick', function() {
let text = td.textContent
td.textContent = '';
let input = document.createElement('input');
input.value = text;
input.focus();
td.appendChild(input);
input.addEventListener('keydown', function(event) {
if (event.key == 'Enter') {
td.textContent = this.value;
}
});
});
}
Ajoutons le code qui, pour la cellule avec le prix et pour la cellule avec la quantité, effectuera le recalcul :
function allowEdit(td) {
td.addEventListener('dblclick', function() {
let text = td.textContent
td.textContent = '';
let input = document.createElement('input');
input.value = text;
input.focus();
td.appendChild(input);
input.addEventListener('keydown', function(event) {
if (event.key == 'Enter') {
td.textContent = this.value;
if (td.classList.contains('price') || td.classList.contains('amount')) {
// effectuons le recalcul
}
}
});
});
}
Complétez la partie manquante du code afin que
lors de la modification d'une cellule de prix ou d'une cellule de
quantité, le coût d'achat dans la colonne cost
soit modifié, et que le recalcul du montant total
soit effectué.
