Cannot read property "style" of null help. [Javascript, HTML, CSS, JQuery] -


this project works fine on jsfiddle when compile file doesn't work. every thing involves changing "style" gives error in source/console.

this simple error can't figure out.

link fiddle: http://jsfiddle.net/enmydky4/

  • code -

html: 

<!doctype html> <head>     <title> color test </title>     <link rel="stylesheet" type="text/css" href="css.css">     <script src = "jquery-2.1.3.js"></script>     <script src="javascript.js"></script>     <meta charset="utf-8"> </head> <html> <body>     <table id="table">         <tr id="row1">             <td></td>             <td></td>             <td></td>             <td></td>             <td></td>         </tr>         <tr id="row2">             <td></td>             <td></td>             <td></td>             <td></td>             <td></td>         </tr>         <tr id="row3">             <td></td>             <td></td>             <td></td>             <td></td>             <td></td>         </tr>         <tr id="row4">             <td></td>             <td></td>             <td></td>             <td></td>             <td></td>         </tr>         <tr id="row5">             <td></td>             <td></td>             <td></td>             <td></td>             <td></td>         </tr>     </table>     <div id="start">start</div>     <div id="time"> time: </div> </body> </html>

javascript:

var items = document.queryselectorall("td"); var itemnum = 0; var correct = 0; var time = 15; var random = function (multiplyer) {     return string(math.round(math.random() * multiplyer)); }; var funcrgb = function () {     var rgb = [random(255), random(255), random(255)].join(",");     return rgb; }; var cleardata = function(){     itemnum = 0;     correct = 0;     time = 15; };  var starttimer = function(){     var timer = setinterval(function(){          if (time > 0){             time = time - 1;             document.getelementbyid("time").innerhtml = "time: " + time;         }else{             alert("finished" + "\n" + "correct: " + string(correct) + "\n" +  "total: " + string(itemnum) + "\n" + "percentage: "  + (correct/itemnum)  * 100 + "%" );             clearinterval(timer);             cleardata();             startgame();         }     }, 1000);  }; var startgame = function () {     var startscreen = document.getelementbyid("start");     startscreen.style.display = "none";     starttimer();     setsquares(); }; var setsquares = function () {     var rgb = funcrgb();     var different = math.round(math.random() * 24);     (var = 0; <= items.length; i++) {         if (i == different) {             items[i].style.backgroundcolor = "rgba(" + rgb + ",.8" + ")";             items[i].id = itemnum;         } else {             items[i].style.backgroundcolor = "rgb(" + rgb + ")";         }     } }; window.onload = function(){     document.getelementbyid("start").onclick = startgame; }  $("#start").click(function() {     $(this).fadeout(); }); $( "td" ).click(function() {     $(this).toggle("bounce");     if ($(this).attr("id") == itemnum) {         correct = correct + 1;     }     itemnum = itemnum + 1;     setsquares(); });        var starttimer = function(){         var timer = setinterval(function(){              if (time > 0){                 time = time - 1;                 document.getelementbyid("time").innerhtml = "time: " + time;             }else{                 //alert("finished" + "\n" + "correct: " + string(correct) + "\n" +  "total: " + string(itemnum) + "\n" + "percentage: "  + (correct/itemnum)  * 100 + "%" );                 clearinterval(timer);                 cleardata();                 startgame();             }         }, 1000);      };     var startgame = function () {         var startscreen = document.getelementbyid("start");         //$(startscreen).toggle( "bounce", { times: 3 }, "slow" );         //startscreen.style.display = "none";         starttimer();         setsquares();     };     var setsquares = function () {         var rgb = funcrgb();         var different = math.round(math.random() * 24);         (var = 0; <= items.length; i++) {             if (i == different) {                 items[i].style.backgroundcolor = "rgba(" + rgb + ",.8" + ")";                 items[i].id = itemnum;             } else {                 items[i].style.backgroundcolor = "rgb(" + rgb + ")";             }         }     };      document.getelementbyid("start").onclick = startgame;     $("#start").click(function() {         $(this).fadeout();     });     $( "td" ).click(function() {         if ($(this).attr("id") == itemnum) {             correct = correct + 1;         }         itemnum = itemnum + 1;         setsquares();     });

wrap code in document.ready handler. short way in jquery put above code in between $(function(){...}) like

$(function(){ var items = document.queryselectorall("td"); var itemnum = 0; var correct = 0; var time = 15; var random = function (multiplyer) {     return string(math.round(math.random() * multiplyer)); }; var funcrgb = function () {     var rgb = [random(255), random(255), random(255)].join(",");     return rgb; }; var cleardata = function(){     itemnum = 0;     correct = 0;     time = 15; };  var starttimer = function(){     var timer = setinterval(function(){          if (time > 0){             time = time - 1;             document.getelementbyid("time").innerhtml = "time: " + time;         }else{             alert("finished" + "\n" + "correct: " + string(correct) + "\n" +  "total: " + string(itemnum) + "\n" + "percentage: "  + (correct/itemnum)  * 100 + "%" );             clearinterval(timer);             cleardata();             startgame();         }     }, 1000);  }; var startgame = function () {     var startscreen = document.getelementbyid("start");     startscreen.style.display = "none";     starttimer();     setsquares(); }; var setsquares = function () {     var rgb = funcrgb();     var different = math.round(math.random() * 24);     (var = 0; <= items.length; i++) {         if (i == different) {             items[i].style.backgroundcolor = "rgba(" + rgb + ",.8" + ")";             items[i].id = itemnum;         } else {             items[i].style.backgroundcolor = "rgb(" + rgb + ")";         }     } }; window.onload = function(){     document.getelementbyid("start").onclick = startgame; }  $("#start").click(function() {     $(this).fadeout(); }); $( "td" ).click(function() {     $(this).toggle("bounce");     if ($(this).attr("id") == itemnum) {         correct = correct + 1;     }     itemnum = itemnum + 1;     setsquares(); });        var starttimer = function(){         var timer = setinterval(function(){              if (time > 0){                 time = time - 1;                 document.getelementbyid("time").innerhtml = "time: " + time;             }else{                 //alert("finished" + "\n" + "correct: " + string(correct) + "\n" +  "total: " + string(itemnum) + "\n" + "percentage: "  + (correct/itemnum)  * 100 + "%" );                 clearinterval(timer);                 cleardata();                 startgame();             }         }, 1000);      };     var startgame = function () {         var startscreen = document.getelementbyid("start");         //$(startscreen).toggle( "bounce", { times: 3 }, "slow" );         //startscreen.style.display = "none";         starttimer();         setsquares();     };     var setsquares = function () {         var rgb = funcrgb();         var different = math.round(math.random() * 24);         (var = 0; <= items.length; i++) {             if (i == different) {                 items[i].style.backgroundcolor = "rgba(" + rgb + ",.8" + ")";                 items[i].id = itemnum;             } else {                 items[i].style.backgroundcolor = "rgb(" + rgb + ")";             }         }     };      document.getelementbyid("start").onclick = startgame;     $("#start").click(function() {         $(this).fadeout();     });     $( "td" ).click(function() {         if ($(this).attr("id") == itemnum) {             correct = correct + 1;         }         itemnum = itemnum + 1;         setsquares();     });  });

the reason working in jsfiddle not actual site because fiddle loading script in onload event.

in actual site, including script in head, following line fail 

var startscreen = document.getelementbyid("start");

since there not yet element id 'start'


Comments

Post a Comment

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

i have following sample code used pre-decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(--c); cout << c << endl; return; } } this function give output input 4 : dp3 dp2 dp1 dp0 0 1 2 3 but when use post decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(c--); cout << c << endl; return; } } output goes in infinite loop dp4 can explain me in detail why happens ? this happens because function(c--) called same value of c , when finishes c decremented. recursively called, hence called same value no chance of return , hit stack overflow error. assume this, int x = 1, y = 0; y = x++ result y == 1 , x == 2. if y = ++x , bot x , y 2.
Read more

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

i added new project. made mistake in projectname.conf file in sites-available apache2, led me reinstalling apache2. after reinstalling , re-enabling projects on every page of every project .. <body> run(); </body> .. i've run composer update, restarted service, restarted pc, checked config files, tried disabling new project. there nothing in error log, , access.log: 127.0.0.1 - - [15/may/2015:01:40:47 +0200] "get / http/1.1" 304 181 "-" "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:38.0) gecko/20100101 firefox/38.0" maybe i'm forgetting apache2 reinstall? don't think did different last time installed it. looks haven't setup php correctly. take @ this great guide , maybe you're forgetting link php config apache2.
Read more

php - How can I echo out this array? -

i don't know how go grabbing data in variable , put foreach loop. class tree{ private $info = array( array('name'=>'jim','state'=>'nu','company'=>'nu','phone'=>array('cell'=>'5615111111','office'=>'5611111111'),'email'=>array('primary'=>'exs@example.com','ex@there.com')), array('name'=>'joe smith','city'=>'phoenix','phone'=>'4805551111','email'=>'jsmith@some_email.com'), array('name'=>'john doe','city'=>'chandler','company'=>'doe co.','email'=>array('jdoe@gmail.com','personal'=>'email@email.com'),'phone'=>'6025550002') ); } if you're inside of class, can access private variable using $this->variablename . example, i...
Read more