For com JS

Front-end
,
#1

Pessoal, estou tentando fazer um innerHTML dentro de um for, mais ela só adiciona o ultimo item no HTML.

loadRecent = () => {
	for (var i = 0; i < localStorage.length; i++) {
		var key = localStorage.key(i)
		var session = localStorage.getItem(key);
		var split = session.split('~');
		var card = document.getElementById('card-row');
		
		card.innerHTML = `
			<div key=${split[3]} class="card mb-3 shadow" style="width: 18rem;">
				<img src=${split[0]}  class="card-img-top" alt="...">
				
				<div class="card-body">
					<h5 class="card-title">${split[1]}</h5>
					<p class="card-text">Valor: ${split[2]}</p>
					<hr>
					<button id=${split[3]} class="btn btn-outline-info">Detalhes</button>
					<button id=${split[3]} class="btn btn-outline-primary">Adicionar <img src="https://cdn2.iconfinder.com/data/icons/data-analytics-2-2/48/90-128.png" width="30" height="20"></img>    
				</div>
			</div>
		`
	}
}
#2

Pelo que entendi, está acontecendo algo similar a isso:

for(var i = 0; i < 5; i++) {
  card.innerHTML = i
}

Qual o valor que fica no innerHTML? 4, o último valor do loop.
Porque a cada passada, você substitui o valor anterior. Você pode tentar concatenar:

for(var i = 0; i < 5; i++) {
  card.innerHTML += i
}

Note o sinal de += no lugar de =

3 curtidas