Fatal编程技术网
  • javascript/
  • Javascript 未捕获类型错误：无法读取属性'；儿童'；空值（…；）（无论我做什么）

Javascript 未捕获类型错误：无法读取属性'；儿童'；空值（…；）（无论我做什么）

javascript html css

Javascript 未捕获类型错误：无法读取属性'；儿童'；空值（…；）（无论我做什么）,javascript,html,css,Javascript,Html,Css,我一直在做一个基本的乒乓球游戏，使用javascript、html和css进行编码 我整晚都在搜索、研究和调试我的代码，我被难住了。我通过控制台日志发现，我可以通过id访问div的子对象，但我无法使用parent.children/parent.childrenCount或其他方法通过其父对象访问同一元素 我感兴趣的代码区域是.html文件中的第12-21行，.js文件中的第12行和第58行。如前所述，我可以通过getElementById访问元素对象，但不能通过其父对象的object.chil

我一直在做一个基本的乒乓球游戏，使用javascript、html和css进行编码

我整晚都在搜索、研究和调试我的代码，我被难住了。我通过控制台日志发现，我可以通过id访问div的子对象，但我无法使用parent.children/parent.childrenCount或其他方法通过其父对象访问同一元素

我感兴趣的代码区域是.html文件中的第12-21行，.js文件中的第12行和第58行。如前所述，我可以通过getElementById访问元素对象，但不能通过其父对象的object.children属性访问它

<html>
<head>
    <title>Stupid Pong</title>

    <link rel="stylesheet" type="text/css" href="Stupid Pong.css">
    <script src="Stupid Pong.js"></script>
</head>
<body id="GameAssets">
    <div id="CanvasFrame">

    <h1 id="Title">Stupid Pong</h1>
    <div id="Popup">
        <div id="PopupMessage">
            Winning score
        </div>
        <input type="text" class="getText">
        <button onclick="Ok()">Set</button>
        <button onclick="Ok()">Play</button>
        <button onclick="Ok()">Controls</button>
        <button onclick="Ok()">Settings</button>
    </div>
    <canvas id="Game_Feild" width="640" height="480">
        This browser isn't hip enough to render Stupid Pong.
    </canvas>
    </div>
</body>


愚蠢的乒乓球
愚蠢的乒乓球
得分
设置
玩
控制
设置
此浏览器不够时髦，无法渲染愚蠢的乒乓球。


//画布变量
var游戏画布；
var画布框架；
var DrawKit；
//游戏设置
var WinningScore；
var困难；
var-FPS；
//输入
var弹出窗口={
pframe:document.getElementById（'Popup'），
messageBox:document.getElementById（'PopupMessage'）
};/*
变量按钮=[
document.getElementById（'Popup'）.children[2]，
document.getElementById（'Popup'）.children[3]，
document.getElementById（'Popup'）.children[4]，
document.getElementById（'Popup'）.children[5]
];
*/
//新球
函数createBall（x，y，r）{
这个.x=x；
这个。y=y；
这个。r=r；
this.draw=函数（）{
DrawKit.fillStyle='白色'；
DrawKit.beginPath（）；
圆弧（ballX，ballY，ballRadius，0，Math.PI*2，真）；
DrawKit.fill（）；
}
}
//新桨
函数CreateBiler（x、y、宽度、高度）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
this.draw=函数（）{
DrawKit.fillStyle=白色；
DrawKit.fillRect（this.x，this.y，this.width，this.height）；
}
}
//加载画布
window.onload=函数（）{
//画布资产
GameCanvas=document.getElementById（'Game_Feild'）；
CanvasFrame=document.getElementById（'CanvasFrame'）；
DrawKit=GameCanvas.getContext（'2d'）；
console.log（弹出窗口的类型）；
console.log（Popup.pframe的类型）；
console.log（Popup.messageBox的类型）；
日志（Popup.pframe.children的类型）；
// ...
对于（变量i=3；i<6；i++）{
//console.log（Popup.children[i]的类型）；
//按钮[i].style.display='none'；
}
}
//手动设置
/*
var SetWinningScore=函数{
var entry=Popup.messageBox.children[1]。值
按钮[0]。确定=函数{
如果（条目类型=='number'）{
}
否则{
Popup.messageBox.children[0].value=“获胜分数”变量为”+
“一个数字，换句话说，多少分
}
}
}*/
我认为行
var Popup={…}
是在DOM完成渲染之前被评估的。因此，在那个时候，没有子对象，这就是您所处的状态

将
window.onload=function（）{…}
围绕整个JS文件。或者按照上面注释中的建议，将
脚本
标记移动到正文底部。任何一种方法都可以确保在分配依赖于DOM元素的变量时，DOM完全可用。

这比我现在有时间正确分析的代码要多，但请尝试移动
元素到正文末尾，正好在结束标记之前。当前，您正在设置
弹出窗口
对象以尝试引用尚未解析的DOM元素，因此
弹出窗口。messageBox
将为
null
，因为
document.getElementById（）
找不到该元素。（或者您可以将该代码移动到您的
窗口.onload
处理程序中。）在您的
html
div
中没有任何子项，那么您如何期望
var entry=Popup.messageBox.children[1].value
不会抛出错误吗？非常感谢。我决定在onload函数中设置对象属性，它工作得非常出色。

// Canvas Variables
var GameCanvas;
var CanvasFrame;
var DrawKit;

// Game settings
var WinningScore;
var Difficulty;
var FPS;

// Input
var Popup = {
    pframe: document.getElementById('Popup'),
    messageBox: document.getElementById('PopupMessage')
};/*
var Button = [
    document.getElementById('Popup').children[2],
    document.getElementById('Popup').children[3],
    document.getElementById('Popup').children[4],
    document.getElementById('Popup').children[5]
];
*/


// New Ball
function createBall(x, y, r){
    this.x = x;
    this.y = y;
    this.r = r;
    this.draw = function(){
        DrawKit.fillStyle = 'white';
        DrawKit.beginPath();
        DrawKit.arc(ballX, ballY, ballRadius, 0, Math.PI*2, true);
        DrawKit.fill();
    }
}

// New Paddle
function createPaddle(x, y, width, height){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.draw = function(){
        DrawKit.fillStyle = white;
        DrawKit.fillRect(this.x, this.y, this.width, this.height);
    }
}


// Load Canvas
window.onload = function(){
    // Canvas Assets
    GameCanvas = document.getElementById('Game_Feild');
    CanvasFrame = document.getElementById('CanvasFrame');
    DrawKit = GameCanvas.getContext('2d');

    console.log(typeof Popup);
    console.log(typeof Popup.pframe);
    console.log(typeof Popup.messageBox);
    console.log(typeof Popup.pframe.children);
    // ...
    for(var i = 3; i < 6; i++){
        //console.log(typeof Popup.children[i]);
        //Button[i].style.display = 'none';
        }
}
// Manual Settings
/*
var SetWinningScore = function{
    var entry = Popup.messageBox.children[1].value
    Button[0].Ok = function{
        if(typeof entry == 'number'){

        }
        else{
            Popup.messageBox.children[0].value = "The \"winning score\" variable is" +
            "a number. In other words, how many points 
        }
    }
}*/