-2

Porque quando executo a função recebo o erro de: appendChild is not a function?

function inserirNumeros(x) {

  let paragraph = document.createElement("p");
  let node = document.createTextNode("this is new");

  paragraph.appendChild(node);


  let display = document.getElementsByClassName("display");
  display.appendChild(paragraph)



}
<body>

  <h1>Calculadora</h1>

  <div class="corpo">

    <div class="display">0</div>

    <div class="numeros">
      <div class="botoes" id="7" onclick="inserirNumeros(7)" value="7">7</div>
      <div class="botoes" id="8">8</div>
      <div class="botoes" id="9">9</div>
      <div class="operacoes" id="divisao">÷</div>
    </div>
  </div>

</body>

3

1 Resposta 1

2

Quando executa a função inserirNumeros() recebe o erro...

appendChild is not a function?

...porque na linha...

let display = document.getElementsByClassName("display");

...o método Document.getElementsByClassName() retorna um vetor do tipo HTMLCollection com todos os elementos que possuem o nome da classe display. No seu caso um vetor contendo apena um elemento.

Uma solução é em javascript fazer com que variável display referencie o primeiro elemento da HTMLCollection retornada por Document.getElementsByClassName(), lembrando que o índice inicial é o zero.

function inserirNumeros(x) {

  let paragraph = document.createElement("p");
  let node = document.createTextNode("this is new");

  paragraph.appendChild(node);


  let display = document.getElementsByClassName("display")[0];
  display.appendChild(paragraph)
}
<body>

  <h1>Calculadora</h1>

  <div class="corpo">

    <div class="display">0</div>

    <div class="numeros">
      <div class="botoes" id="7" onclick="inserirNumeros(7)" value="7">7</div>
      <div class="botoes" id="8">8</div>
      <div class="botoes" id="9">9</div>
      <div class="operacoes" id="divisao">÷</div>
    </div>
  </div>

</body>

Outra solução seria atribuir ao elemento <div class="display">0</div> um id, atributo identificador único global do elemento, e obter sua referência com document.getElementById()

function inserirNumeros(x) {

  let paragraph = document.createElement("p");
  let node = document.createTextNode("this is new");

  paragraph.appendChild(node);


  let display = document.getElementById("display");
  display.appendChild(paragraph)
}
<body>

  <h1>Calculadora</h1>

  <div class="corpo">

    <div id="display">0</div>

    <div class="numeros">
      <div class="botoes" id="7" onclick="inserirNumeros(7)" value="7">7</div>
      <div class="botoes" id="8">8</div>
      <div class="botoes" id="9">9</div>
      <div class="operacoes" id="divisao">÷</div>
    </div>
  </div>

</body>

Outra solução seria utilizar o método Document.querySelector() que retorna o primeiro elemento dentro do documento que corresponde ao grupo especificado de seletores CSS.

function inserirNumeros(x) {

  let paragraph = document.createElement("p");
  let node = document.createTextNode("this is new");

  paragraph.appendChild(node);


  let display = document.querySelector(".display");
  display.appendChild(paragraph)



}
<body>

  <h1>Calculadora</h1>

  <div class="corpo">

    <div class="display">0</div>

    <div class="numeros">
      <div class="botoes" id="7" onclick="inserirNumeros(7)" value="7">7</div>
      <div class="botoes" id="8">8</div>
      <div class="botoes" id="9">9</div>
      <div class="operacoes" id="divisao">÷</div>
    </div>
  </div>

</body>

2
  • o downvote não é meu, pra compensar o esforço +1
    – Syzoth
    18/10/2021 às 11:53
  • @GuilhermeNascimento, fica tranquilo. Não imaginei nada. Obrigado. 18/10/2021 às 12:12

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .