Solve concatenation of document elements

0

I can not go through the for. since the variables that store the document elements are not concatenated. What I'm looking for is to make a counter of the ones that are inside the id menu and its li.

addEventListener('click',eventoE,false);

function eventoE(e) {
	// e.preventDefault();
	var div = document.getElementById('menu');
	var ve = div.getElementsByTagName('li');
	var a = ve.getElementsByTagName('a');

	for (var i = 0; i < a.length; i++) {
		console.log(ve);
		document.write(ve);
	}
}
<!DOCTYPE html>
<html>
<head>
  <title>Comentarios</title>
  <script src="ajax.js"></script>
</head>
<body>
  <div id="menu">
           
    <li><a href="#">Enlaces creados 1</a></li>
    <li><a href="pagina1.php?fecha=12-10-2018">Enlaces creados 2</a></li>
    <li><a href="pagina1.php?fecha=13-10-2018">Enlaces creados 3</a></li>
  </div>
  <div id="container" style="border : 1px solid red;padding: 60px;width: 300px; margin: 20px;"></div>
</body>
</html>
    
asked by Gamez 11.11.2018 в 01:28
source

2 answers

1

What I understood was that given a tag with some identifier (id menu), you want to count the li tags and contents. An alternative solution could be:

 document.addEventListener('click',EventoE,false);

  function EventoE(e)
  {
    var div = document.getElementById('menu');
    var li = div.getElementsByTagName('li');
    var countA = 0;

    for(var i=0;i<li.length;i++)
    {
        var tagA = li[i].getElementsByTagName('a');//obtiene los tags a dentro del tag li

        if(tagA.length != 0 )//verifica existencia de tag a
          countA +=1;
    }
    console.log('Cantidad de tags LI:'+li.length);
    console.log('Cantidad de tags A :'+countA);
  }
<!DOCTYPE html>
<html>
<head>
  <title>Comentarios</title>
  <!-- <script src="ajax.js"></script> -->

</head>
<body>
  <div id="menu">

    <li><a href="#">Enlaces creados 1</a></li>
    <li><a href="pagina1.php?fecha=12-10-2018">Enlaces creados 2</a></li>
    <li><a href="pagina1.php?fecha=13-10-2018">Enlaces creados 3</a></li>
    <li></li>
    <li><a href="pagina1.php?fecha=13-10-2018">Enlaces creados 3</a></li>

  </div>

  <div id="container" style="border : 1px solid red;padding: 60px;width: 300px; margin: 20px;"></div>



</body>
</html>
    
answered by 11.11.2018 / 10:22
source
1

Because you do not do a direct selector to the elements you need with querySelectorAll , your code looks more elegant if you put it that way.

addEventListener('click',eventoE,false);

function eventoE( e ) {
  e.preventDefault();
  let count  = document.getElementById('menu').querySelectorAll('li a');
	for( var i = 0; i < count.length; i++ ){
      console.log( count[ i ] );
  }
}
<!DOCTYPE html>
<html>
<head>
  <title>Comentarios</title>
  <script src="ajax.js"></script>
</head>
<body>
  <div id="menu">
           
    <li><a href="#">Enlaces creados 1</a></li>
    <li><a href="pagina1.php?fecha=12-10-2018">Enlaces creados 2</a></li>
    <li><a href="pagina1.php?fecha=13-10-2018">Enlaces creados 3</a></li>
  </div>
  <div id="container" style="border : 1px solid red;padding: 60px;width: 300px; margin: 20px;"></div>
</body>
</html>
    
answered by 11.11.2018 в 02:15