[Resolvido] Criar uma função em HTML para repetir comandos

[dhannemann]

Olá. Gostaria de saber como criar uma função (talvez em JavaScript) para repetir linhas de comando de HTML.

Por exemplo, atualmente crio 40 linhas iguais a essa:

<div class="icons"><a href="#2"><img class="arred" src="images/Icones/2.jpg"/></a></div>

A primeira com o "#2" e o "/2.jpg", a segunda com "3", a terceira com "4", e assim por diante. Gostaria de criar uma função para poder criar um laço (for) que fizesse isso por mim, mas com HTML não sei fazer isso. É possível?

Editado Agosto 4, 2015 por dhannemann

[lowys]

Oi!

Não tenho certeza, talvez eu esteja falando bobagem, mas creio que as  estruturas de repetição são das linguagens de programação. Sugiro que use uma linguagem server-side, como PHP, mas talvez, possa ser resolvido com javascript.

HTML é uma linguagem de marcação de texto. Não de programação.

 

[dhannemann]

Olá. Obrigado pela resposta. Foi isso q pensei. Por ser marcação de texto n dá pra fazer muita coisa, mas queria usar o javascript (ou outro) pra automaticamente chamar a mesma linha de marcação do HTML várias vezes. Isso é possível?

[wootzor]

Seria algo assim?

for (var i = 2; i <= 40; i++) 
{
    var icons = document.createElement("div");
    icons.setAttribute("class", "icons");
    var href = document.createElement("a");
    href.setAttribute("href", "#" + i);
    href.setAttribute("id", i);
    document.getElementsByTagName("body")[0].appendChild(icons);
    var img = document.createElement("img");
    img.setAttribute("src", "images/Icones/" + i + ".jpg");
    href.appendChild(img);
    icons.appendChild(href);
}

 

[dhannemann]

Olá, wootzor. Mt obrigado pela solução! Deu tudo certo aqui! E também curti mt esse site, já favoritei pra fazer testes rs

Vou agora estudar mais sobre esses comandos q você me mostrou pra melhorar o que quero e também pra aprender mais sobre javascript e html.

Valeuzão mesmo pela ajuda!

Editado Agosto 4, 2015 por dhannemann

[wootzor]

Coloca o ciclo for dentro do evento onload da página e já deverá funcionar:

window.onload = function() {
    //coloca aqui o resto do código
}

 

[dhannemann]

Já funcionou. Desculpa, eu acabei editando minha resposta qd vi que tava resolvido. Mas vou pesquisar sobre o comando onload também, parece interessante (até pra mostrar no lugar certo o que eu quero)

[dhannemann]

Ei wootzor tava pensando em criar outro tópico pra isso, mas acho q você sabe resolver. Tentei usar o window.onload pra funcionar, mas n deu certo. Por alguma razão os artigos do Joomla não permitem o <script>, jogando os comandos que você me passou pra baixo, pra depois de todos os artigos. Pensei que talvez o onload resolvesse isso, mas não sei como chamar a função no código HTML. Sabe me informar?

[dhannemann]

O que estou tentando fazer:

Pra chamar o código:

<div window.onload="javascript:icones()"></div>

O código:

<script>
function icones(){
for(var i=2; i<=x; i++){
    var icons = document.createElement("div");
    icons.setAttribute("class", "icons");
    var href = document.createElement("a");
    href.setAttribute("href", "#"+i);
    document.getElementsByTagName("body")[0].appendChild(icons);
    var img = document.createElement("img");
    img.setAttribute("class", "arred");
    img.setAttribute("src", "images/Icones/"+i+".jpg");
    href.appendChild(img);
    icons.appendChild(href);
    }
}
</script>

 

[dhannemann]

tentei usar o 

window.onload = function() {

Mas ele só faz o código (as imagens) irem pro fim do site, pra depois de tudo. Preciso de uma forma de escolher onde o código vai ficar.

Um exemplo do que preciso eu consegui fazer com o código:

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "daniel";
</script>

Onde no lugar do código HTML em que coloquei o <p> de id "demo" apareceu escrito "daniel", mas não consigo fazer isso com o:

    document.getElementsByTagName("body")[0].appendChild(icons);

 

[wootzor]

Então experimenta com:

 

document.getElementById("demo").appendChild(icons);

 

[dhannemann]

Deu certo! Agora ficou exatamente como eu queria! Mt obrigado pela ajuda!