Javascript for Loop - Duplicate and incomplete content

Navigation
0

I have a UL that contains some news, within it news is within li's . In this the first tag takes the Title of the news and the link of the matter. 

<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>

I need to pass the headings to a H1 tag and the links to an A tag with the text "Learn More", all within%% of content can be edited and copied. For this I have developed the following page where there is a DIV that receives the code that has TEXTAREA . 

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>

But it returns duplicate and incomplete text: 

> 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

I'm a beginner in JS and can not solve this problem.

    
asked by anonymous 05.10.2017 / 22:31

2 answers

1

Within the FOR loop, you always used item 0 instead of the "i" variable to get LI HTML. 

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

To interact using the variable "i", I had to draw the following line: 

conteudoUl.removeChild(conteudoUl.firstChild)

Follow the example working. 

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>
    
05.10.2017 / 22:57
0

When you run your code, the error occurs:

{   "message": "Uncaught TypeError: Can not read property 'getElementsByTagName' of undefined",   "filename": " link ",   "lineno": 26,   "colno": 30 }

I believe the error is due to the fact that you try to refer to elements that do not exist in the DIV.

Note that the UL and LI elements are not nested (inside) of the DIV represented by the "html" variable. 

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;
    
05.10.2017 / 22:44
How to validate defaultPrevented = false in my test angularjs? Creating method in C #, where do the parameters contain? [duplicate]