Uncaught TypeError: Cannot read property 'innerHTML' of null

[iFull 0]

Galera estou tendo problemas com isso.

Uncaught TypeError: Cannot read property 'innerHTML' of null e Uncaught TypeError: Cannot read property 'style' of null

esses 2 erros estão tirando meu sono !

 

vou postar os debugs pra vcs pelo Chrome.

 

Uploaded with ImageShack.us

 

 

 

Uploaded with ImageShack.us

 

e o codigo da index.

 

as ID´s estão nomeadas, isso que não intendo o pq do erro.

<div class="auction-item" style="display: none" title="<?=$objauc["auctionID"];?>" id="auction_<?=$objauc["auctionID"];?>"></div>
<a class="leilao-titulo" href="auction_<?=str_replace(" ","_",strtolower(stripslashes($objauc["name"])));?>_<?=$objauc["auctionID"];?>.html"><?=stripslashes($objauc["name"]);?></a><div class="leilao-data-inicio">Início em <span><?php $data = $objauc["auc_end_date"]; ?><?php echo date('d/m/Y', strtotime($data)); ?></span> as <?php echo $objauc["auc_end_time"]; ?></div>
<div class="leilao-home-foto">
<a href="auction_<?=str_replace(" ","_",strtolower(stripslashes($objauc["name"])));?>_<?=$objauc["auctionID"];?>.html"><a href="auction_<?=str_replace(" ","_",strtolower(stripslashes($objauc["name"])));?>_<?=$objauc["auctionID"];?>.html"><img src="uploads/products/thumbs_big/thumbbig_<?=$objauc["picture1"];?>" border="0" /></a></a></div>
 <div class="leilao-home-produto-info"><p><?=$lng_itemvalue;?><?=$Currency.number_format($objauc["price"],2);?></p>
 <!-- info contador -->
 <span class="fazer-lance"><em>Sem mais lances finaliza em</em><p class="contador" id="counter_index_page_<?=$objauc["auctionID"];?>"><?
								echo "<script language='javascript' type='text/javascript'>
								document.getElementById('counter_index_page_".$objauc["auctionID"]."').innerHTML = calc_counter_from_time('".$objauc["auc_due_time"]."');
								</script>";
							   ?></p>
                                  <!-- botao de lance -->
                                  <span class="botao-lance">
                                  						  	 <? if($uid==""){ ?>
							<img src="imagens/fazerlance.png" border="0"  alt="lance" onmouseover="this.style.margin='-29px 0 0 0'" onmouseout="this.style.margin='0 0 0 0'" onclick="javascript: window.location.href='login.html'" id="image_main_<?=$objauc["auctionID"];?>"  style="cursor: pointer"/>
					  <? } else { ?>
							<img src="imagens/fazerlance.png" border="0" class="bid-button-link" name="getbid.php?prid=<?=$objauc["productID"];?>&aid=<?=$objauc["auctionID"];?>&uid=<?=$uid;?>" alt="BID" onmouseover="this.style.margin='-29px 0 0 0'" onmouseout="this.style.margin='0 0 0 0'" id="image_main_<?=$objauc["auctionID"];?>"  style="cursor: pointer"/>
					  <? } ?>
                         <!-- / botao de lance -->
                                  </span>
                                  <!-- / fazer lance (lado esquerdo) -->
         </span>
<!-- / info contador -->

<!-- valor atual e lances -->
<span class="preco-atual">
<p>Valendo</p>
<span class="preco-atual-valor" id="currencysymbol_<?=$objauc["auctionID"];?>" style="font-size:12px"></span><span class="preco-atual-valor" id="price_index_page_<?=$objauc["auctionID"];?>">---</span>
<p class="arrematador">LANCE POR<BR />
<span>
<?=$lng_bidder;?><span id="product_bidder_<?=$objauc["auctionID"];?>">---</span></span></p>
<!-- / valor atual e lances -->
</span>

 </div>

 

valeu...

[William Bruno 1501]

cara, é simples.

 

chega uma hora que tá buscando um ID q não existe. Ai falha.

 

alert( 'counter_index_page_'+auction_id );

acompanhe o resultado desse alert(), com o código html.

 

tem algum auction_id q ta mandando um objeto NULO

 

 

dessa forma ai apenas com ID, é muito trabalhoso e problemático.

Melhore a navegação pelo DOM, usando as outras funções, getElementsByTagName(), by.. usando parent.. e coisas do tipo do DOM.

[iFull 0]

WILLIAN beleza? Cara vou verificar, e como eu mudaria essas funções pra melhorar, pode me dar uma referencia ? não manjo muito de js.

[William Bruno 1501]

identifique as duplicações de código.

 

document.getElementById('counter_index_page_'+auction_id).a
document.getElementById('counter_index_page_'+auction_id).b
document.getElementById('counter_index_page_'+auction_id).c

..

olhe qntas vezes você chama o getElementById(), para achar um elemento q você já achou..

seria muito melhor em performance, e mais simples de debugar, se você fizesse assim:

 

 

var counter_index_el = document.getElementById('counter_index_page_'+auction_id);
counter_index_el.a
counter_index_el.b
counter_index_el.c

entendeu ?

 

 

qnto as outras coisas, não tem muito pra onde fugir. Estude, pesquise, procure.

 

 

 

além disso, se você está usando jQuery, você deveria usar o $(), e não document.getElementById().

 

 

veja sobre os métodos .parent(), .find(), .next() da biblioteca. No site oficial, você tem um otimo manual.

leia: http://wbruno.com.br/blog/2011/06/21/afinal-e-javascript/