getElementById de elemento criado dinamicamente com javascript

[castroluis]

Boa tarde malta! Tenho estado a tentar resolver isto e já me fartei de pesquisar mas não encontrei solução!

Tenho este código:

<script>
  function show() {

if (document.getElementById('cart').style.display == 'none' || document.getElementById('cart').style.display == ''){
 document.getElementById('cart').style.display = 'block';

 var num_rows = localStorage.length;
 var num_cols = 6;
 var theader = "<table id='table1'>";
 var tbody = "";

 theader = theader+"<th width = 150>Código</th>"+"<th width = 250>Produto</th>"+"<th width = 100>Quantidade</th>"+"<th width = 150>Preço Unidade</th>"+"<th width = 150>Preço Total</th>"+"<th width = 150>Remover</th>";

 for(var i = 0; i < num_rows; i++)
 {
  tbody += "<tr>";
  for(var j = 0; j < num_cols; j++)
  {
   tbody += "<td>";
   if(j < num_cols-1)
   {
	var string = localStorage.getItem(i).split(',');
	tbody += string[j];
   }
   else
   {
	tbody += "<label>";alert('a');
	tbody += '<input type="number" id="remove" value="1" min="1" max="parseInt(string[2])">';alert('a');
	tbody += '<button onclick="'+removeQuantity(i)+'"> X </button>';alert('a');
	tbody += '</label>';

   }

   tbody += "</td>"

  }

  tbody += "</tr><br />";
 }
 var tfooter = "</table>";
 document.getElementById('cartProducts').innerHTML = theader + tbody + tfooter;

}else{
 document.getElementById('cart').style.display = 'none';
}
  }
	</script>

	<script>
  function removeQuantity(i)
  {
var string = localStorage.getItem(i).split(',');

var quantityNow = string[2];
alert('a');
var quantityToRemove = document.getElementById('remove').value;
alert("b");
var key = localStorage.key(i);

localStorage.removeItem(key);
alert(parseInt(quantityNow));alert(parseInt(quantityToRemove));
cartitem=new Array();
cartitem[0] = string[0];
cartitem[1] = string[1];
cartitem[2] = parseInt(quantityNow) - parseInt(quantityToRemove);
cartitem[3] = string[3];
cartitem[4] = parseInt(string[3])*parseInt(cartitem[2]);
alert(cartitem[2]);alert(cartitem[4]);
localStorage.setItem(key, cartitem);
  }
	</script>

A função show é chamada e cria normalmente a tabela, mas apenas quando não tenha a função onclick="'+removeQuantity(i)+'"

A função "removeQuantity" é iniciada normamente mas dá erro pois o document.getElementById('remove') retorna null.

Se eu aplicar estilos css sobr o id='remove' ele funciona perfeitamente!

Mas nesta sitção dá erro!

Preciso mesmo de umas luzes ....

[castroluis]

Acrescentando... O butão que estou a tentar criar está na ultima célula de cada linha da tabela! Junto a ele está o tal input que tem id="remove" que vai receber o numero de produtos a remover! E é esse valor que preciso pegar!

[Knitter]

Não percebi bem o que queres, e o teu código precisava de muitas validações ou pelo menos mais atenção a coisas que podem falhar já que assumes que nunca há problemas. Mas esta linha não parece correcta:

tbody += '<input type="number" id="remove" value="1" min="1" max="parseInt(string[2])">';alert('a');

Além de me parecer que falta uma concatenação já que o que está dentro do atributo "max" vai ser apenas texto, tens vários elementos com o mesmo ID, o que não pode acontecer.

[castroluis]

hum valeu ... vou verificar se o problema é mesmo o facto de criar o mesmo id. Sim a parte do max está incorreta, por causa dos testes que andei a fazer!, mas não é o problema, o problema é mesmo conseguir aceder agora ao id='remove'.

[castroluis]

alterei a linha, mas continuo a receber null quando entro na função removeQuantity(i) para o resultado de getElementById('remove'+i)

tbody += "<input type='number' id='remove'"+i+" value='1' min='1' max='"+parseInt(string[2])+"'>";

Edited February 27, 2014 at 10:48 PM by castroluis

[Knitter]

Usa um debugger (tanto o Google Chrome como o Firefox têm um) para veres o que se está a ser executado, passo a passo, e perceberes onde está a falhar a criação dos elementos.

[castroluis]

Eu uso o do chrome! A unica falha que dá é mesmo que o id do meu input é null e como tal não posso aceder ao seu valor.

Ou ele não está a ser criado de alguma maneira ou eu não estou a aceder a ele da maneira correta, que é o mais lógico, devido a ser criado pelo innerHTML!

De qualquer maneira já resolvi o meu problema, não usando o innerHtml e alterando a maneira como crio a tabela dinamica. Mas ficou a duvida sobre como aceder ao conteudo deste input desta forma!

[Knitter]

Usar innerHTML não é impedimento de usar getElementById. Sem ter a página com o código todo para confirmar a execução posso estar errado, mas é possível que o elemento não estivesse no DOM na altura em que tentavas encontrá-lo, não me lembro de outra situação (tirando erro de código) que possa ser efeito de usar o atributo innerHTML mas como digo, só olhar para o código estático não dá (ao qual, verdade seja dita nem prestei muita atenção 🙂 ).

[castroluis]

Sim acredito que não seja, o que é certo é que não encontrei maneira de perceber porque aquela chamada do id me retorna null sempre, e porque o botão que está na tabela tambem me retorna null ....

O resto do código é apenas um botão, no body, que chama a função show(), que por sua vez torna visivel um novo div com a tabela preenchida! E ela é de facto bem preenchida! O problema é aceder a elementos que estão nas suas células! No meu caso um input e um button!

O que é certo é que agora já tenho esta parte do site pronta sem usar o innerHtml.... Mas fica a duvida sobre isto para se alguem me souber resolver!

Edited February 28, 2014 at 02:55 PM by castroluis

[saloeric]

usar jquery está fora de questão? com jquery é muito fácil aceder aos elementos que estão dentro do elemento "pai".

[castroluis]

Como ficaria em JQuery para aceder ao elemento em questão?

[saloeric]

coloque aí a estrutura da tabela com os inputs que tem, mas apenas a estrutura em html, sem código adicional. Depois diga a que elementos é que quer ter acesso.

[castroluis]

<table id='table1'>
 <th width = 150>Código</th><th width = 250>Produto</th>"+"<th width = 100>Quantidade</th>"+"<th width = 150>Preço Unidade</th>"+"<th width = 150>Preço Total</th>
<th width = 150>Remover</th>

	 for(var i = 0; i < num_rows; i++)
	 {
	 tbody += "<tr>";
	 for(var j = 0; j < num_cols; j++)
	 {
	 tbody += "<td>";
	 if(j < num_cols-1)
	 {
	 var string = localStorage.getItem(i).split(',');
	 tbody += string[j];
	 }
	 else
	 {
	 tbody += "<label>";
	 tbody += '<input type="number" id="remove" value="1" min="1" max="parseInt(string[2])">';
	 tbody += '<button onclick="'+removeQuantity(i)+'"> X </button>';
	 tbody += '</label>';

	 }

	 tbody += "</td>"

	 }

	 tbody += "</tr><br />";
	 }
	 var tfooter = "</table>";
	 document.getElementById('cartProducts').innerHTML = theader + tbody + tfooter;

É uma tabela dinamica... deixei assim para não confundir muito!

Agora preciso conseguir laçar o evento onclick e aceder ao valor que está no input com o id='remove'

[saloeric]

seria mais ou menos assim, não testei:

$(function(){
$('.de_uma_classe_ao_botao').click(function(){
 //como o input está antes do button pode tentar assim
alert( $(this).prev().val());
//ou caso não funciona da maneira em cima pode fazer outra
var tdPai = $(this).closest('td');
alert( tdPai.find('input').val());

});
});

[taviroquai]

Viva,

Aqui:

tbody += '<input type="number" id="remove" value="1" min="1" max="parseInt(string[2])">';

Como o Knitter disse, o atributo ID tem que ser unico, se tiveres 2 linhas, vais repetir esse ID nos dois elementos. Usa assim:

tbody += '<input type="number" id="remove'+i+'" value="1" min="1" max="parseInt(string[2])">';

E depois na função removeQuantity usa assim:

var quantityToRemove = document.getElementById('remove'+i).value;

Aqui:

tbody += '<button onclick="'+removeQuantity(i)+'"> X </button>';

Se estás a construir a tabela não deves executar a função, deves colocar o evento assim:

tbody += '<button onclick="removeQuantity('+i+')"> X </button>';

Deduzo que pretendes remover a quantidade de um produto indicando o seu índice na lista...

[bioshock]

$(function(){
$('.de_uma_classe_ao_botao').click(function(){

});

Caso esta solução não funcione, hoje tive o mesmo problema, mas por acaso resolvi de outra forma:

$(document.body).on('click', '.classe_do_botão', function(){

});

Com este código não terás problemas de eventos em elementos criados dinamicamente.

Edited March 5, 2014 at 11:10 PM by bioshock