addeventlistener being called irregularly

Asked

Viewed 41 times

0

I have the following code:

const setup = async() => {
    var arrayDados = [];
    let teuarray = [];
    var comeco = 4;
    var index = 2300;

    teuarray.push({id:1,nome: "arrayDados[i]"},{id:2,nome: "arrayDados[i]"});
    const lista = document.getElementById('lista');

    teuarray.map((cliente)=> {
      let divRowT = document.createElement("div");
      divRowT.className = "row-table";
      let divDivT = document.createElement("div");
      divDivT.className = "div-table";

      let id = document.createElement("a");
      id.className = "col-table";
      id.addEventListener("click", retornaPai(), false);
      id.href = "";
      let idValue = document.createElement("div");
      idValue.appendChild(document.createTextNode(cliente.id));
      id.appendChild(idValue);
      divDivT.appendChild(id);

      let nome = document.createElement("a");
      nome.className = "col-table";
      nome.addEventListener("click", retornaPai(), false);
      nome.href = "";
      let nomeValue = document.createElement("div");
      nomeValue.appendChild(document.createTextNode(cliente.nome));
      nome.appendChild(nomeValue);
      divDivT.appendChild(nome);

      let divColT = document.createElement("div");
      divColT.className = "col-table";
      let btnExcluir = document.createElement("input");
      btnExcluir.type = "button";
      btnExcluir.id = cliente.id;
      btnExcluir.value = "Excluir";
      btnExcluir.addEventListener("click", excluir, false);
      divColT.appendChild(btnExcluir);
      divDivT.appendChild(divColT);

      divRowT.appendChild(divDivT);
      lista.appendChild(divRowT);
    });
  }
  function retornaPai(nome) {
    // var pai = window.opener;

    console.log("teste");
    // pai.document.getElementById('usuario').value = nome;
    // pai.document.getElementById("buscarUsuario").onclick();
  }
  function excluir() {
    let btnSelecionado = event.currentTarget;
    console.log(btnSelecionado.id);
    var posicao = (btnSelecionado.id - 2300)/56;
    let url = decodeURI("http://192.168.1.142/limpaUsuario?");
    let params = "a="+posicao;
    sendConf(url,params,"excluído");
  }
  
.table{
  }
  .row-table-head, .div-table, .row-table{
    display: grid;
    grid-template-columns: 50px 180px 70px;
    width: 300px;
    margin: auto;
  }
  .row-table-head{
    display: block;
  }
  .row-table a{
    text-decoration: none;
    color: #000;
  }
  .div-table:hover{
    background-color: #a0a0a0;
  }
  .row-table-head .col-table{
    padding: 6px 8px;
    border: 1px solid #ccc;
  }
  .row-table .col-table{
   padding: 0px 6px;
  }
  <body align="center" onload="setup()"> <!--retirei o setup(), pois já faço uma chamada no js-->
        <h1>IMPEXPROS</h1>
        <div id="lista" class="table"> <!--inclui um id pra facilitar no js-->
          <div class="row-table-head">
            <div style="background-color:black; color:white; font-weight:bold" class="col-table">LISTA TODOS USUARIOS</div>
          </div>
        </div>
  </body>

I don’t understand why the function returnPai() is being called 4 times, and my addeventlistener should call it only when clicking on the HTML element.

Can anyone tell me why?

javascript html5

1 answer

2


You’re running the function when you have it retornaPai() as an argument from addEventListener... you have to take the () to pass a reference to the function and not call the function even before the event handset is recorded...

If you want to pass arguments to the function you can do so:

const setup = async() => {
  var arrayDados = [];
  let teuarray = [];
  var comeco = 4;
  var index = 2300;

  teuarray.push({
    id: 1,
    nome: "arrayDados[i]"
  }, {
    id: 2,
    nome: "arrayDados[i]"
  });
  const lista = document.getElementById('lista');

  teuarray.map((cliente) => {
    let divRowT = document.createElement("div");
    divRowT.className = "row-table";
    let divDivT = document.createElement("div");
    divDivT.className = "div-table";

    let id = document.createElement("a");
    id.className = "col-table";
    id.addEventListener("click", retornaPai.bind(null, cliente.nome), false);
    id.href = "";
    let idValue = document.createElement("div");
    idValue.appendChild(document.createTextNode(cliente.id));
    id.appendChild(idValue);
    divDivT.appendChild(id);

    let nome = document.createElement("a");
    nome.className = "col-table";
    nome.addEventListener("click", function(){ retornaPai(cliente.nome); }, false);
    nome.href = "";
    let nomeValue = document.createElement("div");
    nomeValue.appendChild(document.createTextNode(cliente.nome));
    nome.appendChild(nomeValue);
    divDivT.appendChild(nome);

    let divColT = document.createElement("div");
    divColT.className = "col-table";
    let btnExcluir = document.createElement("input");
    btnExcluir.type = "button";
    btnExcluir.id = cliente.id;
    btnExcluir.value = "Excluir";
    btnExcluir.addEventListener("click", excluir, false);
    divColT.appendChild(btnExcluir);
    divDivT.appendChild(divColT);

    divRowT.appendChild(divDivT);
    lista.appendChild(divRowT);
  });
}

function retornaPai(nome) {
  // var pai = window.opener;

  console.log("teste", nome);
  // pai.document.getElementById('usuario').value = nome;
  // pai.document.getElementById("buscarUsuario").onclick();
}

function excluir() {
  let btnSelecionado = event.currentTarget;
  console.log(btnSelecionado.id);
  var posicao = (btnSelecionado.id - 2300) / 56;
  let url = decodeURI("http://192.168.1.142/limpaUsuario?");
  let params = "a=" + posicao;
  sendConf(url, params, "excluído");
}
.table {}

.row-table-head,
.div-table,
.row-table {
  display: grid;
  grid-template-columns: 50px 180px 70px;
  width: 300px;
  margin: auto;
}

.row-table-head {
  display: block;
}

.row-table a {
  text-decoration: none;
  color: #000;
}

.div-table:hover {
  background-color: #a0a0a0;
}

.row-table-head .col-table {
  padding: 6px 8px;
  border: 1px solid #ccc;
}

.row-table .col-table {
  padding: 0px 6px;
}
<body align="center" onload="setup()">
  <!--retirei o setup(), pois já faço uma chamada no js-->
  <h1>IMPEXPROS</h1>
  <div id="lista" class="table">
    <!--inclui um id pra facilitar no js-->
    <div class="row-table-head">
      <div style="background-color:black; color:white; font-weight:bold" class="col-table">LISTA TODOS USUARIOS</div>
    </div>
  </div>
</body>

  • 1

    And how would I pass a data to the function, for example: backPai(client.name)?

  • @Vitorpereira put together two different ways of doing in the answer code. Choose what you prefer, they’re different but for your case they’re similar.

  • Thanks Sergio, it worked as planned!

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.