Question

我有这个JS函数，它应检查元素上是否有firstChild，如果没有应该用||创建一个段落document.createElement（“p”），但是我收到一个错误，无法读取null的firstChild属性

编辑：不应该在代码中使用“if（元素），我是关于尝试使用它的东西，但是当我遇到错误时它不存在

function    update(element,content,klass)   {
    var p   =   element.firstChild  ||  document.createElement("p");        
    p.textContent   =   content;
    element.appendChild(p);
    if(klass)   {
    p.className =   klass;
    }
}

完整的JS文件

var button = document.getElementById("button");
var rainbow = ["red","orange","yellow","green","blue","indigo","violet"];
////    dom references  ////
var $question   =   document.getElementById("question");
var $score  =   document.getElementById("score");
var $feedback   =   document.getElementById("feedback");


function    update(element,content,klass)   {
    var p   =   element.firstChild  ||  document.createElement("p");

    p.textContent   =   content;
    element.appendChild(p);
    if(klass)   {
    p.className =   klass;
    }
}


var score = 0;

var quiz = {
    "name": "Super Hero Name Quiz",
    "description": "How many super heroes can you name",
    "question": "What is the real name of ",
    "questions": [
        {"question" : "Superman", "answer": "Clarke Kent"},
        {"question" : "Batman" , "answer": "Bruce Wayne"},
        {"question" : "Wonder Woman", "answer": "Dianna Prince"}
    ]
}




function play(quiz){
    for(var i= 0,question,answer,max=quiz.questions.length;i<max;i++){
        question = quiz.questions[i].question;
        answer = ask(question);
        check(answer,i);
    }
    gameOver();

}
play(quiz);

function ask(question){
    update($question,quiz.question + question)
    return prompt("Enter your awnser");
}
function check(answer,index){
    if(answer === quiz.questions[index].answer){
        update($feedback,"Correct!","right");
        score++;
    }
    else{
        update($feedback,"Wrong!","wrong");
    }

}


function gameOver(){

        update($question,"Game  Over,   you scored  "   +   score   +   "points");
}

Html文件

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="A quiz game for ninjas">
<meta name="author" content="DAZ">
<title>Quiz Ninja</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Quiz Ninja!</h1>
<p>Score:   <strong id="score">0</strong></p>   
</header>
<script src="js/scripts.js"></script>
<section id="question">
    <p>Question:</p>
</section>
<section id="feedback">
    <p>Feedback</p>

</section>
</body>
</html>

不确定为什么我在$ question和$ feedback上获得NULL

Answer 1

$question或$feedback为空。检查您的标记，确保使用id='question'定义了元素，并使用id='feedback'定义了元素。

此外，update函数中的逻辑似乎有点乱。您正在检查element是否为空，但在访问其中一个element属性后执行此操作。这可能会更好地为您服务：

function update(element,content,klass) {
    if(element) {
        var p = element.firstChild || document.createElement("p");
        element.appendChild(p);
        p.textContent = content;
        if(klass) {
            p.className = klass;
        }
    }
}

Answer 2

在javascript中，null.someFunction不返回undefined，而是抛出TypeError: null is not an object (evaluating 'null.someFunction')。这是因为Javascript无法获取不存在的变量的属性。这与undefined.someFunction相同。

||运算符返回它给出的第一个truthy值，truthy意思不是null或undefined或0。但是，要找到它们的价值，首先必须对它们进行评估。因为您的代码首先尝试获取element.firstChild，所以它会失败，因为element为null或未定义。如果element.firstChild失败，则||运算符无法运行。

相反，您可以在使用之前检查元素是否已定义。

var p;
if(element)
    p   =   element.firstChild  ||  document.createElement("p");
else
    p   =   document.createElement("p");

要将其压缩为一行，您可以使用三元运算符

var p   =   element ? element.firstChild : false  ||  document.createElement("p");

现在您可能会遇到

未定义element的错误

element.appendChild(p);

这是因为您删除了编辑中的if语句。

另一方面，Javascript文件在找到脚本标记时加载并执行。这意味着它找不到您的部分，因为它们尚未加载。要解决此问题，请在加载之前将脚本移动到底部：

<section id="question">
    <p>Question:</p>
</section>
<section id="feedback">
    <p>Feedback</p>
</section>
<script src="js/scripts.js"></script>

然后，标签将被加载并放入页面中，脚本将运行并找到标签。

解决此问题的另一个选择是使用Jquery的$(document).ready(function(){})

如果您将所有代码包装在

中

$(document).ready(function(){
  // your code
});

Jquery将在运行代码之前等待页面完全加载。

Javascript ||无法正常工作

2 个答案: