0

Tenho uma UL que contem algumas noticias, dentro dela as noticias ficam dentro de li's. Nisso a primeira tag leva o Título da notícia e o link da matéria.

<ul>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 1
    </a>
    <br>
    Texto da noticia 1
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 2
    </a>
    <br>
    Texto da noticia 2
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 3
    </a>
    <br>
    Texto da noticia 3
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 4
    </a>
    <br>
    Texto da noticia 4
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 5
    </a>
    <br>
    Texto da noticia 5
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 6
    </a>
    <br>
    Texto da noticia 6
    <br>
    <a href="">Leia mais</a>
</li>

Preciso passar os títulos para uma tag H1 e os links para uma tag A com o texto "Saiba mais", tudo isso dentro de uma DIV que o conteúdo possa ser editado e copiado. Para isso desenvolvi a seguinte página onde há uma TEXTAREA que recebe o código que possui o UL.

function carregarConteudoHtml (){
			
			//renderiza o valor da textarea em uma DIV no documento
			var htmlEntrada = document.getElementById("html").value;
			document.getElementById("entradaHtml").innerHTML = htmlEntrada;
			
			
			var html = document.getElementById("entradaHtml"); // armazena a o conteudo da DIV com a UL
			
			var conteudoUl = html.getElementsByTagName("ul")[0]; // armazena a UL
			var numeroLi = conteudoUl.getElementsByTagName("li").length; //conta o número de LIs dentro da UL
		
			// faz um loop para o número de LIs que existem na UL
			for (i = 0; i<numeroLi; i++){ 
				
				var conteudoLi = conteudoUl.getElementsByTagName("li")[0];// aarmazena o conteudo da primeira LI dentro da UL
				
				conteudoUl.removeChild(conteudoUl.firstChild);// exclui a primeira LI para que a LI de baixo seja a primeira
								
				var titulo = conteudoLi.getElementsByTagName("a")[0].innerHTML; // armazena o texto (titulo da noticia) que esta dentro do primeiro A na LI
				var botao = conteudoLi.getElementsByTagName("a")[0].href; // armazena o texto (titulo da noticia) que esta dentro do primeiro A na LI

				//armazena o que estava antes e soma com o novo
				var conteudoSaida = document.getElementById("saida").innerHTML; //armazena o conteudo da DIV
				var noticiaEmail = document.getElementById("saida").innerHTML = "<br>" + conteudoSaida + '<h2>'+titulo+"</h2><a href="+botao+">Saiba mais</a><br>"; // soma o conteudo que tinha antes na DIV e insere com os novos
			}
		}
<textarea id="html"></textarea>
	<div id="entradaHtml" style="display: none"></div>
	<button onClick="carregarConteudoHtml()">OK</button>
	<div id="saida" contenteditable="true"></div>

Porém ele retorna o texto duplicado e incompleto:

> Título Notícia 1
> 
> Saiba mais Título Notícia 1
> 
> Saiba mais Título Notícia 2
> 
> Saiba mais Título Notícia 2
> 
> Saiba mais Título Notícia 3
> 
> Saiba mais Título Notícia 3
> 
> Saiba mais

Sou iniciante em JS e não estou conseguindo resolver esse problema.

1
  • Acredito que seu exemplo esteja incompleto, pois esta ocorrendo erro. Commented 5/10/2017 às 20:48

2 Respostas 2

0

Dentro do looping FOR, você utilizou sempre o item 0 ao invés da variável "i" para obter o HTML do LI.

var conteudoLi = conteudoUl.getElementsByTagName("li")[i];

Para interagir usando á variável "i", tive que tirar a seguinte linha:

conteudoUl.removeChild(conteudoUl.firstChild)

Segue o exemplo funcionando.

function carregarConteudoHtml (){
			
			//renderiza o valor da textarea em uma DIV no documento
			var htmlEntrada = document.getElementById("html").value;
			document.getElementById("entradaHtml").innerHTML = htmlEntrada;
			
			
			var html = document.getElementById("entradaHtml"); // armazena a o conteudo da DIV com a UL
			
			var conteudoUl = html.getElementsByTagName("ul")[0]; // armazena a UL
			var numeroLi = conteudoUl.getElementsByTagName("li").length; //conta o número de LIs dentro da UL
		
			// faz um loop para o número de LIs que existem na UL
			for (i = 0; i<numeroLi; i++){ 
				
				var conteudoLi = conteudoUl.getElementsByTagName("li")[i];// aarmazena o conteudo da primeira LI dentro da UL
				
				//conteudoUl.removeChild(conteudoUl.firstChild);// exclui a primeira LI para que a LI de baixo seja a primeira
								
				var titulo = conteudoLi.getElementsByTagName("a")[0].innerHTML; // armazena o texto (titulo da noticia) que esta dentro do primeiro A na LI
				var botao = conteudoLi.getElementsByTagName("a")[0].href; // armazena o texto (titulo da noticia) que esta dentro do primeiro A na LI

				//armazena o que estava antes e soma com o novo
				var conteudoSaida = document.getElementById("saida").innerHTML; //armazena o conteudo da DIV
				var noticiaEmail = document.getElementById("saida").innerHTML = "<br>" + conteudoSaida + '<h2>'+titulo+"</h2><a href="+botao+">Saiba mais</a><br>"; // soma o conteudo que tinha antes na DIV e insere com os novos
			}
		}
<textarea id="html">
<ul>
<li>
    <img src="" alt="">
    <a href="">
        Título Notícia 1
    </a>
    <br>
    Texto da noticia 1
    <br>
    <a href="#link1">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="#link2">
        Título Notícia 2
    </a>
    <br>
    Texto da noticia 2
    <br>
    <a href="">Leia mais</a>
</li>
<li>
    <img src="" alt="">
    <a href="#link3">
        Título Notícia 3
    </a>
    <br>
    Texto da noticia 3
    <br>
    <a href="">Leia mais</a>
</li>
</ul>
</textarea>
	<div id="entradaHtml" style="display: none"></div>
	<button onClick="carregarConteudoHtml()">OK</button>
	<div id="saida" contenteditable="true"></div>

0

Ao executar seu código ocorre o erro:

{ "message": "Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined", "filename": "https://stacksnippets.net/js", "lineno": 26, "colno": 30 }

Acredito que o erro se deve ao fato de você tentar referir a elementos que não existem na DIV.

Observe que os elementos UL e LI não estão aninhados (dentro) da DIV representada pela variável "html".

var html = document.getElementById("entradaHtml"); // armazena a o conteudo da DIV com a UL
var conteudoUl = html.getElementsByTagName("ul")[0]; // armazena a UL
var numeroLi = conteudoUl.getElementsByTagName("li").length;

Você deve fazer log-in para responder a esta pergunta.