Невозможно прочитать свойство «стиль» нулевой справки. [Javascript, HTML, CSS, JQuery]

Этот проект отлично работает на JSFiddle, но когда я компилирую его в файл, он не работает. В основном все, что связано с изменением стиля, дает ошибку в источнике/консоли.Невозможно прочитать свойство «стиль» нулевой справки. [Javascript, HTML, CSS, JQuery]

Это, вероятно, простая ошибка, но я не могу понять это.

Ссылка на скрипку: http://jsfiddle.net/enmydky4/

код -

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); 
    for (var i = 0; i <= 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); 
     for (var i = 0; i <= 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(); 
    });

источник

2015-05-14 Antonio

У вас есть то же самое функции дважды? – adeneo

- ваш код js, завернутый в $ (document) .ready() ;? – deowk

Итак, была ли ваша проблема решена? – AmmarCSE

Wrap код в обработчике document.ready. Короткий путь в JQuery бы поставить выше код между как

$(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); 
    for (var i = 0; i <= 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); 
     for (var i = 0; i <= 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(); 
    }); 

});

Причиной она работает в вашем jsfiddle, но не ваш фактический сайт потому, что скрипку нагружал сценарий в onLoad случае.

В вашем фактическом месте, вы в том числе сценарий в голове, так что следующая строка потерпит неудачу

var StartScreen = document.getElementById("Start");

поскольку еще не элемент с идентификатором «Start»

источник

2015-05-14 22:22:17 AmmarCSE

Невозможно прочитать свойство «стиль» нулевой справки. [Javascript, HTML, CSS, JQuery]

ответ

Смежные вопросы