Redigering med omberäkning i en produktkalkylator i JavaScript
Låt oss nu förbättra funktionen allowEdit
så att den omberäkning som beskrivs i föregående
lektion utförs.
Vid det här laget bör koden för din funktion se ut ungefär så här:
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;
}
});
});
}
Låt oss lägga till kod som för cellen med pris och för cellen med kvantitet kommer att utföra omberäkning:
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')) {
// utför omberäkning
}
}
});
});
}
Komplettera den saknade delen av koden så att
när en cell med pris eller en cell med
kvantitet ändras, så uppdateras köpekostnaden
i kolumnen cost, och en omberäkning av
totalsumman utförs.