Solucionado
Pelos desafio anteriores, havia entendido que usamos o innerHTML para incluir oum código HTML em nosso index via JS. E o TextContent seria apenas para inserir um texto.
Mas neste projeto utilizadmos o innerHTML somente para inserir um texto.
Qual é a diferença entre os dois? Quando usar um e quando usar outro?
att, Turí Souza
innerHTML -> retorna o texto COM formatações e COM elementos html
// Exemplo:
let exemploInner = document.getElementById("textoHtml");
console.log("------ USANDO innerHTML ------");
console.log(exemploInner.innerHTML);
textContent -> retorna o texto COM formatações, mas SEM os elementos HTML
// Exemplo:
console.log("------ USANDO textContent ------");
console.log(exemploInner.textContent);
Compreendi. Mas no projeto em questão, usa-se o InnerHTML e se insere apenas um texto. Porque com o TextContent não funciona?
//uso da textContent para chamar um texto, ok
if (lista.textContent == "") {
lista.textContent = amigo.value;
} else {
lista.textContent = lista.textContent + ", " + amigo.value;
}
amigo.value = "";
}
function sortear () {
if (amigos.length < 3) {
alert("São Necessários pelo menos 3 amigos")
return;
}
embaralha(amigos);
let sorteio = document.getElementById("lista-sorteio");
for (let i = 0; i < amigos.length; i++) {
//Uso do InnerHTML para incluir um texto
if (i == amigos.length - 1) {
sorteio.innerHTML = sorteio.innerHTML + amigos[i] + " --> " + amigos[0] + "<br>";
} else {
sorteio.innerHTML = sorteio.innerHTML + amigos[i] + " --> " + amigos[i + 1] + "<br>";
}
}
}
Oi!
Foi utilizado innerHTML porque foi incluído um texto junto com uma tag html <br>:
sorteio.innerHTML = sorteio.innerHTML + amigos[i] + " --> " + amigos[0] + "<br>";
Entendido, grato!