Text vanishing act in Firefox...

[Thorondor]

I'm using a javascript array to hold product information (PC hardware) so that when a user click on a product the product details page is loaded.

Each product has a number of key characteristics to be shown (a maximum of 10); in this case by using a standard unordered list with adequate id for each list item.

The thing is: while the code works fine with IE6 it doesn't ever show in Firefox. It's probably something quite simple, but I can't seem to nail it down...

Here's the function where it all happens:

function ShowValidListItems(){
  //function that shows all the current product's key characteristics
  var num_caract = -1
  var texto_caract=""
  var i = -1
  
  //ensure all product characteristics on the UL are made invisible
  for (i=0;i<=9;i++) {
   document.getElementById("lista_caracteristicas").childNodes[i].style.visibility="hidden"
  }
  
  //get the number of characteristics to be listed for this product
  num_caract=data_array[id_produto][6]
 
  for (i=0; i<num_caract; i++) {
   //get the text for each product characteristic and then show it
   texto_caract=data_array[id_produto][9+i]
   if (i==0) {document.getElementById("car1").childNodes[0].nodeValue=texto_caract}
   if (i==1) {document.getElementById("car2").childNodes[0].nodeValue=texto_caract}
   if (i==2) {document.getElementById("car3").childNodes[0].nodeValue=texto_caract}
   if (i==3) {document.getElementById("car4").childNodes[0].nodeValue=texto_caract}
   if (i==4) {document.getElementById("car5").childNodes[0].nodeValue=texto_caract}
   if (i==5) {document.getElementById("car6").childNodes[0].nodeValue=texto_caract}
   if (i==6) {document.getElementById("car7").childNodes[0].nodeValue=texto_caract}
   if (i==7) {document.getElementById("car8").childNodes[0].nodeValue=texto_caract}
   if (i==8) {document.getElementById("car9").childNodes[0].nodeValue=texto_caract}
   if (i==9) {document.getElementById("car10").childNodes[0].nodeValue=texto_caract}
   //show
   document.getElementById("lista_caracteristicas").childNodes[i].style.visibility="visible"
  }
 }

also, for your reference, the list definition on the HTML's body

<div id="caracteristicas">
  <ul id="lista_caracteristicas" class="style7">
    <li  class="style5" id="car1">Car1</li>
    <li  class="style5" id="car2">Car2</li>
    <li  class="style5" id="car3">Car3</li>
    <li  class="style5" id="car4">Car4</li>
    <li  class="style5" id="car5">Car5</li>
    <li  class="style5" id="car6">Car6</li>
    <li  class="style5" id="car7">Car7</li>
    <li  class="style5" id="car8">Car8</li>
    <li  class="style5" id="car9">Car9</li>
    <li  class="style5" id="car10">Car10</li>
  </ul>
</div>

::

Thank you for reading. Any help will be very much appreciated.

[patenaudemat]

What are the contents of data_array and id_produto, and from where are they coming?

[Thorondor]

id_produto holds the index of the user selected product on the data_array array (passed via the page URL when a product's image is clicked on another page).

The array itself is initialised by way of the following statement
data_array=SetupDataArray()

The function above is located on a separate .js file (included by <script type="text/javascript" src="filename.js"></script>).

function SetupDataArray() {
  //function that fills the multidimensional array holding all product data
  //arranged as: standard image, product name, brand logo, price, short description, button text,
  //number of product characteristics, smaller_image, brand name, the characteristics themselves 
 
  var my_data_array=new Array()
  
  my_data_array[0]= new Array("logitech_G7.jpg","Rato Logitech G7","logo_logitech_mini.gif","€ 100,00","O novo rato de alta precisão para 'gamers'","Ratos Logitech",4,"logitech_g7_mini.gif","Logitech","Tecnologia Laser","2000 dpi de Resolução ","Sem fios","Bateria suplente recarregável sempre pronta")
  my_data_array[1]= new Array("inno3D_GS.jpg","Placa Gráfica Inno3D 7900 GS","logo_nvidia_mini.gif","€ 480,00","Alta performance numa placa nVidia a custo acessível","Placas INNO3D",5,"inno3D_GS_mini.gif","nVidia","Duplica o poder de Shading em relação à geração anterior","Suporte completo ao Shader Model 3.0 do DirectX 9.0","O motor CineFX 4.0 da nVidia providencia efeitos visuais avançados","Rendering HDR para uma iluminação natural totalmente imersiva","Interface PCI Express com uns estonteantes 4Gb/segundo")
  my_data_array[2]= new Array("intel_core_2_duo_logo1.gif","Intel Core 2 Duo Extreme","logo_intel_mini.gif","€ 650,00","O melhor desempenho em qualquer situação com o cunho da Intel","Processadores Intel",6,"intel_c_2_duo_mini.gif","Intel","Até 40% mais rápidos que a geração anterior","Gestão inteligente do consumo de energia","Smart Memory Access que optimiza o acesso à memória","Advanced Digital Media Boost para a melhor experiencia multimédia","Wide Dynamic Execution permitindo a execução de mais instruções por ciclo de relógio","Advanced Smart Cache para aplicações multi-threading de ponta")
  my_data_array[3]= new Array("hp_photosmart_D7160.jpg","HP Photosmart D7160","logo_hp_mini.gif","€ 150,00","Concebida para aqueles que desejam impressão fotográfica ultra-rápida com qualidade de laboratório, visualizar, editar e imprimir, com ou sem um PC.","Impressoras HP",4,"hp_phsm_D7160_mini.gif","HP","Seis tinteiros individuais para maior eficiência no consumo","Tecnologia jacto de tinta térmica HP","Até 4800 x 1200 ppp optimizados a cores (a partir de um PC)","Fotografias duradouras e documentos de texto com qualidade equivalente a laser")
  my_data_array[4]= new Array("hp_scanjet_4850.jpg","HP Scanjet 4850","logo_hp_mini.gif","€ 150,00","Para quem a qualidade de imagem vem primeiro este scanner nao desaponta. De negativos a objectos tridimensionais o desempenho permanece invejável.","Scanners HP",4,"hp_scjet_4850_mini.jpg","HP","Resolução óptica de digitalização de 4800 ppp","48 bits de profundidade de cor","256 niveis de cinzentos","Formato máximo de digitalização 220 x 315 mm")
  my_data_array[5]= new Array("logitech_Z-5500.jpg","Colunas Logitech Z-5500","logo_logitech_mini.gif","€ 250,00","Acorde os vizinhos com o potente som surround de alta performance da Logitech.","Colunas Logitech",4,"logitech_Z-5500_mini.jpg","Logitech","Sistema com certificação THX","Som 5.1 com 500 Watts de potência","Suporte a streams de audio DTS 96 kHz / 24-bit","Ligação a PC, consolas, leitor de DVD ou aparelhagem de som")
	
 return my_data_array
}

::

I suspect trouble arises from the method used to reference the element to show, not the logic itself, though, since IE6 runs it without a glitch.

And thanks for posting back, patenaudemat.

[Fang]

This won't work:

//ensure all product characteristics on the UL are made invisible
  for (i=0;i<=9;i++) {
  document.getElementById("lista_caracteristicas").childNodes[i].style.visibility="hidden"
  }

You are forgetting the DOM whitespace in Mozilla.
childNodes[0] is #text
childNodes[1] is LI

[_Aerospace_Eng_]

It might be better to use document.getElementsByTagName() instead.

document.getElementById("lista_caracteristicas").getElementsByTagName('LI')[i].style.visibility="hidden"

This helps avoid any whitespace issues among different browsers.

[Thorondor]

Thanks a million, _Aerospace_Eng_ Referencing by Tag Name as you suggested bridged the gap and did the trick!

::

Product characteristics now show up without a hitch. Thanks, guys!