Fiz o primeiro desafio, do Alugames. Para mudar o texto nos botões, eu usei .innerHTML, mas os instrutores usaram .textContent. Eu consegui fazer o texto no botão mudar, mas como a resposta "oficial" fez isso de uma maneira diferente, me surgiu a dúvida: qual a diferença entre os dois? E quando eu devo usar um ou outro?
Meu código ficou assim:
function alterarStatus(id) {
let game = document.getElementById('game-' + id);
let image =game.querySelector('.dashboard__item__img');
let botao = game.querySelector('.dashboard__item__button');
if (botao.classList.contains('dashboard__item__button--return')) {
image.classList.remove('dashboard__item__img--rented');
botao.classList.remove('dashboard__item__button--return');
botao.innerHTML = "Alugar";
} else {
image.classList.add('dashboard__item__img--rented');
botao.classList.add('dashboard__item__button--return');
botao.innerHTML = "Devolver";
}
}
O gabarito do desafio é esse:
function alterarStatus(id) {
let gameClicado = document.getElementById(`game-${id}`);
let imagem = gameClicado.querySelector('.dashboard__item__img');
let botao = gameClicado.querySelector('.dashboard__item__button');
let nomeJogo = gameClicado.querySelector('.dashboard__item__name');
if (imagem.classList.contains('dashboard__item__img--rented')) {
imagem.classList.remove('dashboard__item__img--rented');
botao.classList.remove('dashboard__item__button--return');
botao.textContent = 'Alugar';
} else {
imagem.classList.add('dashboard__item__img--rented');
botao.classList.add('dashboard__item__button--return');
botao.textContent = 'Devolver';
}
}
Valeu!
