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

Question

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 class="carpeta">
        <span>
          <h4>Abecedario</h4>
          <button onclick="anadirLetra()">Otra letra</button>
        </span>
    </div>

    <div class="carpeta">
        <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?

You are creating `p` tags, then setting the `innerHTML`, but you don't actually put the new `p` on the page anywhere. — takendarkk, Dec 12 '22 at 16:49
also, you should set `textContent` instead of `innerHTML` - [info about the innerHTML vulnerability](https://medium.com/@gregadiaz89/dom-innerhtml-vulnerability-8821a03ef2b8) — ericmp, Dec 12 '22 at 16:52
https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — epascarello, Dec 12 '22 at 16:54
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Dec 12 '22 at 16:59
@takendarkk But the OP isn't even setting the `innerHTML` of the element they just created. They're setting the `innerHTML` of the `innerHTML` of the `HTMLCollection` of all of the `p` elements in the document. — Heretic Monkey, Dec 12 '22 at 17:02
@HereticMonkey Check edit history, that line has changed since I posted my comment. — takendarkk, Dec 12 '22 at 17:18

score 1 · Accepted Answer · answered Dec 12 '22 at 17:02

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 class="carpeta">
        <span>
          <h4 id="Abecedario">Abecedario</h4>
          <button onclick="anadirLetra()">Otra letra</button>
        </span>
    </div>

    <div class="carpeta">
        <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>

score 0 · Answer 2 · answered Dec 12 '22 at 16:54

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 class="carpeta">
    <span>
      <h4>Abecedario</h4>
      <button onclick="anadirLetra(this)">Otra letra</button>
    </span>
</div>

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

score 0 · Answer 3 · answered Dec 13 '22 at 04:36

use appendChild() function

<!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 class="carpeta">
        <span>
          <h4 >Abecedario : <a id="alphabet"></a></h4>
          <button onclick="anadirLetra()">Otra letra</button>
        </span>
    </div>

    <div class="carpeta">
        <span>
            <h4>Números : <a id="number"></a></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("alphabet").appendChild(p1);
        }

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

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

3 Answers3