Edição com recálculo na calculadora de produtos em JavaScript
Vamos agora aprimorar a função allowEdit
para que execute o recálculo descrito na lição
anterior.
Neste momento, o código da sua função deve ser mais ou menos assim:
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;
}
});
});
}
Vamos adicionar um código que, para a célula de preço e para a célula de quantidade, executará o recálculo:
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')) {
// executar o recálculo
}
}
});
});
}
Complete a parte do código que falta para que,
ao alterar a célula de preço ou a célula de
quantidade, o custo da compra na coluna
cost seja alterado, e também seja
executado o recálculo do valor total.
