Saludos
Necesito ayuda con el código que detallo más abajo.
La página es un diseño de un panel de 90 números para un juego de bingo o loto, en el cual, deben encenderse los números conforme son cantados o extraídos.
Un programa en PHP se encara de incluir, en la parte de javascript, los números extraídos, y al cargar la página, ese javascript debería cambiar de color los números, pero no es así. Cuando intento ejecutar el programa, me devuelve error en:
Todo.style.color = 'green'
No se puede obtener la propiedad 'style' de referencia nula o sin definir
Tengo escritos varios códigos con estas instrucciones, funcionando correctamente, pero en este no veo cual es el problema.
¿Alguien puede iluminarme?
Gracias
Un saludo
José Antonio Gracia
CODIGO QUE NO FUNCIONA:
Debería iluminar el número 17
<!DOCTYPE html>
<head>
<title>Panel 90</title>
<!-- META HTTP-EQUIV="REFRESH" CONTENT="1;URL=pan90.html" -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta charset="utf-8">
<style type="text/css">
table{
width: 1000px;
height:720px;
top: 100px;
left: 100px;
color: #505050;
font-size:62px;
border: 1px red
}
table td{
height: 50px;
border-style: solid;
border-color: #ffffff;
color: #505050;
background-color: #000000;
text-align: center;
font-size: 62px
}
/*
table td div{
top: 0px;
left: 0px;
height: 62px;
color: #505050;
background-color: #00000f;
text-align: center;
font-size: 62px ;
}
*/
</style>
<script type="text/javascript">
var N=new Array();
N[0]=17;
ult=1;
for(i=0;i<ult;i++)
{
a="B"+N
;
alert(a)
// b = document.getElementById(a);
// var b = document.getElementsByName(a);
// document.getElementById(a).style.background ="white"
// document.getElementById(a).style.Color ="lightred";
var todo=document.getElementById( a )
todo.style.color='green'
}
a="B"+N
alert(a)
// var b = document.getElementById(a);
// document.getElementById(a).style.background ="green";
// document.getElementById(a).style.Color ="lightblue";
var todo = document.getElementById( a )
aletr(todo)
todo.style.color='blue'
window.alert("Pasa");
</script>
</head>
<!-- body background="bingo.png" BGCOLOR=BLACK color=white style="top: 0px; left: 0px; width: 100%; height: 95%;" -->
<body BGCOLOR="BLACK" color="white" >
<!-- style="top: 0px; left: 0px; width: 1024px; height: 768px; overflow: hidden; border-style: solid; border-color: #ff0000;" -->
<table>
<TR>
<td id="B01">01</td>
<td id="B02">02</td>
<td id="B03">03</td>
<td id="B04">04</td>
<td id="B05">05</td>
<td id="B06">06</td>
<td id="B07">07</td>
<td id="B08">08</td>
<td id="B09">09</td>
<td id="B10">10</td>
</TR>
<TR>
<td id="B11">11</td>
<td id="B12">12</td>
<td id="B13">13</td>
<td id="B14">14</td>
<td id="B15">15</td>
<td id="B16">16</td>
<td id="B17">17</td>
<td id="B18">18</td>
<td id="B19">19</td>
<td id="B20">20</td>
</TR>
<TR>
<td id="B21">21</td>
<td id="B22">22</td>
<td id="B23">23</td>
<td id="B24">24</td>
<td id="B25">25</td>
<td id="B26">26</td>
<td id="B27">27</td>
<td id="B28">28</td>
<td id="B29">29</td>
<td id="B30">30</td>
</TR>
<TR>
<td id="B31">31</td>
<td id="B32">32</td>
<td id="B33">33</td>
<td id="B34">34</td>
<td id="B35">35</td>
<td id="B36">36</td>
<td id="B37">37</td>
<td id="B38">38</td>
<td id="B39">39</td>
<td id="B40">40</td>
</TR>
<TR>
<td id="B41">41</td>
<td id="B42">42</td>
<td id="B43">43</td>
<td id="B44">44</td>
<td id="B45">45</td>
<td id="B46">46</td>
<td id="B47">47</td>
<td id="B48">48</td>
<td id="B49">49</td>
<td id="B50">50</td>
</TR>
<TR>
<td id="B51">51</td>
<td id="B52">52</td>
<td id="B53">53</td>
<td id="B54">54</td>
<td id="B55">55</td>
<td id="B56">56</td>
<td id="B57">57</td>
<td id="B58">58</td>
<td id="B59">59</td>
<td id="B60">60</td>
</TR>
<TR>
<td id="B61">61</td>
<td id="B62">62</td>
<td id="B63">63</td>
<td id="B64">64</td>
<td id="B65">65</td>
<td id="B66">66</td>
<td id="B67">67</td>
<td id="B68">68</td>
<td id="B69">69</td>
<td id="B70">70</td>
</TR>
<TR>
<td id="B71">71</td>
<td id="B72">72</td>
<td id="B73">73</td>
<td id="B74">74</td>
<td id="B75">75</td>
<td id="B76">76</td>
<td id="B77">77</td>
<td id="B78">78</td>
<td id="B79">79</td>
<td id="B80">80</td>
</TR>
<TR>
<td id="B81">81</td>
<td id="B82">82</td>
<td id="B83">83</td>
<td id="B84">84</td>
<td id="B85">85</td>
<td id="B86">86</td>
<td id="B87">87</td>
<td id="B88">88</td>
<td id="B89">89</td>
<td id="B90">90</td>
</TR>
</table>
<!-- /DIV -->
</body>
</html>
a simple vista puedo ver que tenes un error sintactico:
Citaraletr(todo)
Deberia ser alert(todo)
Que navegador usas? Si estas en Chrome apreta F12 y vas a ver el debugger de JS para ver que esta fallando y hasta el numero de linea. En Firefox tenes FireBug que es lo mismo.
Y pone tu codigo dentre de las etiquetas
Citar[code=html4strict]<-------- tu codigo aca---------> [/code]
Fijate donde dice "Codigo Geshi" en as herramientas del foro ;)
Siempre hay que poner los js al final del documento HTML, justo antes de cerrar el tag </body>. Porque la descarga de esto es bloqueante, es decir mientras el navegador descarga un script js no descarga nada mas, y también en caso de error no te bloquea todo el documento.
Cita de: jagrane en 10 Agosto 2016, 18:29 PM
Gracias unsigned
Acabo de descubrir el error. También el que me indicas, que no me fallaba por no llegar a esa línea
El problema es que se ejecuta el script antes de presentar la tabla. Lo he puesto al final de ella y ya funciona.
Muchas gracias
Un saludo
José Antonio Gracia
Para mantener el orden, puedes poner al principio:
addEventListener("load", function(){
// Código del script
});