1

Estou tentando adicionar um evento de click a todos os elementos que adiciono na tabela. Faço isso no mesmo momento que crio as linhas e celulas. obs: o código funciona mas não é setado o "src" que deveriar ser trocado de acordo com button em que eu cliquei.

function preecheTable(){
row = document.createElement("tr")    //cria uma linha vazia
    celula = document.createElement("td");    //cria uma celula de dados
    link = document.createElement("button");
    //link.setAttribute("href", data[i].link);
    link.innerHTML = data[i].titulo;
    celula.appendChild(link);
    row.appendChild(celula);
    table.appendChild(row);
    //cria a relacao do iframe com o episodio escolhido
    celula.addEventListener("click", relationIframe(data[i].link, tableName));
}

function relationIframe(link, Nome){
  var video;
  if(Nome == "tablePodcast"){
    video = document.getElementById("sec-podcast").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }else if(Nome == "tableEsport"){
    video = document.getElementById("sec-esport").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }else if(Nome == "tableGameplays"){//GAMEPLAYS
    video = document.getElementById("sec-gameplays").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }

}

1
  • trate como 0, i faz parte de uma iteração, ele não é o problema q quero resolver, o quero resolver é o fato de que os valores do addEventListener estão fixos, ou seja, ele só usa o link do último link prego. Commented 6/05/2018 às 16:56

1 Resposta 1

0

Como você está enviando parâmetros para outra função, é preciso incluir a função externa no addEventListener dentro de uma função própria do evento, desta forma:

celula.addEventListener("click", function(){
    relationIframe(data[i].link, tableName);
});

Assim o evento click será atribuído a cada elemento referido em celula.

Teste:

data = [
{
   "titulo" : "tit1", "link": "teste1.html"
},
{
   "titulo" : "tit2", "link": "teste2.html"
}
]


table = document.querySelector("table");
function preecheTable(i,tableName){
   row = document.createElement("tr")    //cria uma linha vazia
    celula = document.createElement("td");    //cria uma celula de dados
    link = document.createElement("button");
    //link.setAttribute("href", data[i].link);
    link.innerHTML = data[i].titulo;
    celula.appendChild(link);
    row.appendChild(celula);
    table.appendChild(row);
    //cria a relacao do iframe com o episodio escolhido
    celula.addEventListener("click", function(){ relationIframe(data[i].link, tableName) });
}

function relationIframe(link, Nome){
  var video;
  if(Nome == "tablePodcast"){
    video = document.getElementById("sec-podcast").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }else if(Nome == "tableEsport"){
    video = document.getElementById("sec-esport").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }else if(Nome == "tableGameplays"){//GAMEPLAYS
    video = document.getElementById("sec-gameplays").getElementsByTagName("iframe")[0];
    video.setAttribute("src", link);
  }
console.log(link);
}
<table border="1">
</table>

<button type="button" onclick="preecheTable(0, 'tablePodcast')">Add0</button>
<button type="button" onclick="preecheTable(1, 'tableEsport')">Add1</button>
<br>
<div id="sec-podcast">
   <iframe height="20"></iframe>
</div>
<div id="sec-esport">
   <iframe height="20"></iframe>
</div>

Você deve fazer log-in para responder a esta pergunta.

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