Solucionado
Oi, eu estou com um pouco de dificuldade em aprender funções:
var passo1 = document.createElement('p');
var passo2 = document.createElement('p');
var passo3 = document.createElement('p');
var passo4 = document.createElement('p');
var passo5 = document.createElement('p');Como eu poderia reduzir esse código utilizando uma função? Eu vi no curso, mas não entendi muito bem
Pelo que eu entendi do seu código, uma forma de reduzir seria criar uma array vazio. Você pode adicionar novos elementos, desta forma, ao invés de criar 5 variáveis, terá apenas uma matriz com "n" posições. Exemplo:
var passos = []; //Array vazio
function carregarPassos(quantidade){
for (i = 0; i < quantidade; i++) {
passos[i] = document.createElement('p');
}
}
carregarPassos(5);O código acima vai criar um array com 5 posições, o número de posições fica a seu critério. Para utilizar algum dos conteúdos, basta fazer passos[posicao], sendo que a primeira posição começa com zero.
Mas assim, os conteúdos de cada passo são diferentes, então, eu ainda posso utilizar o array? Ou tenho que me manter em variáveis distintas?
Lucas, se você quer colocar um valor dentro de cada um, dá pra fazer esse pequeno ajuste no código do Daniel colocando condições:
function carregarPassos(quantidade) {
for (i = 0; i < quantidade; i++) {
passos[i] = document.createElement('p');
// se é o item 1, ele tem 'i' igual '0'
if(i == 0) passos[i].innerHTML = 'Conteudo 1';
// se é o item 2, ele tem 'i' = '1'
if(i == 1) passos[i].innerHTML = 'Conteudo 2';
// se é o item 3, ele tem 'i' = '2'
if(i == 2) passos[i].innerHTML = 'Conteudo 3';
}
}Então, eu estou colocando valor enquanto ele percorre o Array usando o 'innerHTML', ou seja, estou colocando código HTML dentro de cada tag p.
Agora, vamos supor que você deseja colocar o valor já depois, aí basta acessar o Array 'passos[]' fazendo dessa forma (troque o x pela posição no array começando do zero):
passos[x].innerHTML = 'valor a colocar';O importante é você entender que usando a função do Daniel, pra acessar os elementos após o uso dela, você só precisar usar o passos[x], certo?
Espero que possa ter ajudado. Abraço!