Olá, Hayane. Tudo bem?

Pelo que entendi, você está se referindo a utilizar o querySelectorAll, ele seleciona todos elementos do HTML com o mesmo "Id" ou "Classe".

Se você quiser adicionar mais botões e fazer com que eles sejam detectados pelo querySelectorAll, todos precisam compartilhar um seletor comum, como a mesma classe ou id.

Exemplo:

No HTML:

<button class="meuBotao">Botão 1</button>
<button class="meuBotao">Botão 2</button>
<button id="addButton">Adicionar Novo Botão</button>

No JavaScript:

function criarParagrafo() {
  const p = document.createElement("p");
  p.textContent = "Você clicou em um botão!";
  document.body.appendChild(p);
}

function adicionarEventos() {
  const botoes = document.querySelectorAll(".meuBotao"); // Seleciona pela classe
  botoes.forEach(botao => {
    botao.addEventListener("click", criarParagrafo);
  });
}

// Adicionando um novo botão
document.querySelector("#addButton").addEventListener("click", function () {
  const novoBotao = document.createElement("button");
  novoBotao.textContent = "Novo Botão";
  novoBotao.classList.add("meuBotao"); // Mesma classe
  document.body.appendChild(novoBotao);
  adicionarEventos(); // Atualiza os eventos
});

adicionarEventos(); // Inicial

Resumo:

• Use querySelectorAll(".minhaClasse") para selecionar botões que compartilhem uma mesma classe.
• Sempre que criar novos botões, adicione a mesma classe e atualize os eventos chamando novamente a função que os aplica.

Espero ter entendido e conseguido ajudar. Qualquer coisa manda mais detalhes. Bons estudos.