无法读取null帮助的属性“样式”。 [Javascript，HTML，CSS，JQuery]

时间：2015-05-14 22:17:34

标签： javascript jquery html css

这个项目在JSFiddle上运行得非常好但是当我把它编译成文件时它不起作用。 基本上，涉及更改“样式”的所有事情都会在源/控制台中出现错误。

这可能是一个简单的错误，但我无法弄清楚。

链接到小提琴：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();
    });

1 个答案:

答案 0 :(得分：0)

将代码包装在document.ready处理程序中。 jQuery的简短方法是将上面的代码放在$(function(){...})之间

$(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");

因为还没有一个带有ID＆＃39;开始＆＃39;

的元素
相关问题
最新问题