Bewerken met herberekening in een productencalculator in JavaScript
Laten we nu de functie allowEdit aanpassen
zodat de herberekening, beschreven in de vorige
les, wordt uitgevoerd.
Op dit moment zou je code van de functie er ongeveer zo uit moeten zien:
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;
}
});
});
}
Laten we code toevoegen die voor de cel met de prijs en voor de cel met de hoeveelheid de herberekening zal uitvoeren:
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')) {
// voer herberekening uit
}
}
});
});
}
Schrijf het ontbrekende deel van de code zo, dat
bij het wijzigen van de cel met de prijs of de cel met
de hoeveelheid, de kosten van de aankoop
in de kolom cost veranderen, en ook de
herberekening van het totaalbedrag wordt uitgevoerd.
