My innerHTML doesn't work and I don't know why?-CodePudding

I want to add nums and the alphabet when I click:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Añadir letras y números</title>

    <style>
        .carpeta{
            border: 2px solid blue;
            display: inline-flex;
        }
    </style>

</head>
<body>

    <div >
        <span>
          <h4>Abecedario</h4>
          <button onclick="anadirLetra()">Otra letra</button>
        </span>
    </div>

    <div >
        <span>
            <h4>Números</h4>
        </span>
        <span>
         <button onclick="anadirNum()">Otro número</button>
        </span>
    </div>


    <script>    
        var letras = ["A", "B", "C", "D", "E"];
        var indiceABC = 0; /* posición de la primera letra del vector */
        var numero = 1; /* primer número a escribir */

        function anadirLetra(){
            var p1 = document.createElement("p");
            document.getElementsByTagName("p").innerHTML.innerHTML = letras[1];
        }

        function anadirNum(){
            var p2 = document.createElement("p");
            document.getElementsByTagName("p").innerHTML.innerHTML = numero;
        }
    </script>
    
</body>
</html>

I know i have to create a counter, but the first step doesn't work, and I dont know why. The finality is to add a 1, and then 2, 3, 4, etc. But this code can't print me even the 1...

How can I solve this?

CodePudding user response：

When you create a element you must attach it to other element in document in order they show, example: (document.getElementById("Abecedario").append(p1);)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Añadir letras y números</title>

    <style>
        .carpeta{
            border: 2px solid blue;
            display: inline-flex;
        }
    </style>

</head>
<body>

    <div >
        <span>
          <h4 id="Abecedario">Abecedario</h4>
          <button onclick="anadirLetra()">Otra letra</button>
        </span>
    </div>

    <div >
        <span>
            <h4 id="numeros">Números</h4>
        </span>
        <span>
         <button onclick="anadirNum()">Otro número</button>
        </span>
    </div>


    <script>    
        var letras = ["A", "B", "C", "D", "E"];
        var indiceABC = 0; /* posición de la primera letra del vector */
        var numero = 1; /* primer número a escribir */

        function anadirLetra(){
            var p1 = document.createElement("p");
            p1.innerHTML = letras[1];
            document.getElementById("Abecedario").append(p1);
        }

        function anadirNum(){
            var p2 = document.createElement("p");
            p2.innerHTML = numero;
            document.getElementById("numeros").append(p2);
        }
    </script>
    
</body>
</html>

CodePudding user response：

Your create the element but you are not appending it to the parent

        var letras = ["A", "B", "C", "D", "E"];
        var indiceABC = 0; /* posición de la primera letra del vector */
        var numero = 1; /* primer número a escribir */

        function anadirLetra(el){
         let parent = el.parentElement;
          if(!parent.querySelector('p')){
              var p1 = document.createElement("p");
              p1.innerHTML = letras[1];
              parent.appendChild(p1);
            }
        }

        function anadirNum(el){
          let parent = el.parentElement;
          if(!parent.querySelector('p')){
              var p2 = document.createElement("p");
              p2.innerHTML = numero;

              parent.appendChild(p2);
            }
        }

<style>
    .carpeta{
        border: 2px solid blue;
        display: inline-flex;
    }
</style>
<body>

<div >
    <span>
      <h4>Abecedario</h4>
      <button onclick="anadirLetra(this)">Otra letra</button>
    </span>
</div>

<div >
    <span>
        <h4>Números</h4>
    </span>
    <span>
     <button onclick="anadirNum(this)">Otro número</button>
    </span>
</div>