Javascript 未捕获的TypeError:无法读取null的属性“firstElementChild”

正在尝试执行代码

程序：

单击任意选项->单击否，我不确定->单击任意选项->单击是，锁定选项

第二个时间按钮Yes，lock（是，锁定）选项将不起任何作用，我在控制台中发现：

未捕获的TypeError:无法读取null的属性“firstElementChild”

.对{ 显示器：flex； 对齐项目：居中； 宽度：90%； 高度：自动； 最小高度：40px； 位置：相对位置； 背景：绿色； 颜色：白色； } .正确：：之后{ 内容：； 位置：绝对位置； 左：-20px； 底部：0； 宽度：0； 身高：0； 右边框：20px纯绿； 边框顶部：20px实心透明； 边框底部：20px实心透明； } .正确：：之前{ 内容：； 位置：绝对位置； 右：-20px； 底部：0； 宽度：0； 身高：0； 左边框：20px纯绿； 边框顶部：20px实心透明； 边框底部：20px实心透明； } .救生索{ 背景颜色：粉红色； 颜色：白色； } .不正确{ 显示器：flex； 对齐项目：居中； 宽度：90%； 高度：自动； 最小高度：40px； 位置：相对位置； 背景：红色； 颜色：白色； } .不正确：：之后{ 内容：； 位置：绝对位置； 左：-20px； 底部：0； 宽度：0； 身高：0； 右边框：20px纯红； 边框顶部：20px实心透明； 边框底部：20px实心透明； } .不正确：：之前{ 内容：； 位置：绝对位置； 右：-20px； 底部：0； 宽度：0； 身高：0； 左边框：20px纯红； 边框顶部：20px实心透明； 边框底部：20px实心透明； } .上锁{ 显示器：flex； 对齐项目：居中； 宽度：90%； 高度：自动； 最小高度：40px； 位置：相对位置； 背景：黄色； 颜色：白色； } .锁定：：之后{ 内容：； 位置：绝对位置； 左：-20px； 底部：0； 宽度：0； 身高：0； 右边框：20px实心黄色； 边框顶部：20px实心透明； 边框底部：20px实心透明； } .锁定：：之前{ 内容：； 位置：绝对位置； 右：-20px； 底部：0； 宽度：0； 身高：0； 左边框：20px实心黄色； 边框顶部：20px实心透明； 边框底部：20px实心透明； } .超时{ 背景颜色：橙色； 颜色：白色； } /* .问题1{ 背景颜色：蓝色； 颜色：白色； } */ .隐藏计时器{ 可见性：隐藏； 显示：无； } .可见{ 可见性：可见！重要 } .超时{ 显示器：flex； 对齐项目：居中； 宽度：90%； 高度：自动； 最小高度：40px； 位置：相对位置； 背景：橙色； 颜色：白色； } .超时：：之后{ 内容：； 位置：绝对位置； 左：-20px； 底部：0； 宽度：0； 身高：0； 右边框：20px实心橙色； 边框顶部：20px实心透明； 边框底部：20px实心透明； } .超时：：之前{ 内容：； 位置：绝对位置； 右：-20px； 底部：0； 宽度：0； 身高：0； 左边框：20px实心橙色； 边框顶部：20px实心透明； 边框底部：20px实心透明； } .问题1{ 显示器：flex； 对齐项目：居中； 宽度：90%； 高度：自动； 最小高度：40px； 位置：相对位置； 背景：蓝色； 颜色：白色； } .问题1：：之后{ 内容：； 位置：绝对位置； 左：-20px； 底部：0； 宽度：0； 身高：0； 右边框：20px纯蓝； 边框顶部：20px实心透明； 边框底部：20px实心透明； } .问题1：：之前{ 内容：； 位置：绝对位置； 右：-20px； 底部：0； 宽度：0； 身高：0； 左边框：20px纯蓝色； 边框顶部：20px实心透明； 边框底部：20px实心透明； } .table_cstm{ 边界塌陷：分离； 边界间距：15； /*应用单元格间距*/ 表布局：固定 } 运输署：最后儿童组{ 左边距：自动； } /*头球开始*/ .按钮_cstm_退出{ 背景色：红色； 边界：无； 颜色：白色； 填充：10px； 文本对齐：居中； 文字装饰：无； 显示：内联块； 字体大小：35px； 利润：4倍2倍； 光标：指针； 边界半径：50%； } .按钮_cstm_退出：悬停{ 颜色：红色； 字体大小：粗体； 背景：无； 边框：2倍纯红； } .按钮{ 背景颜色：蓝色； 边界：无； 颜色：白色； 填充：10px； 文本对齐：居中； 文字装饰：无； 显示：内联块； 字体大小：35px； 利润：4倍2倍； 光标：指针； 边界半径：50%； 位置：相对位置； } .按钮：悬停{ 颜色：蓝色； 字体大小：粗体； 背景：无； 边框：2件纯蓝； } .按钮_cst _pnts{ 背景颜色：橙色； 边界：无； 颜色：白色； 填充：10px； 文本对齐：居中； 文字装饰：无； 显示：内联块； 字体大小：35px； 利润：4倍2倍； 光标：指针； 边界半径：50%； 位置：相对位置； } .按钮_cst_pnt:悬停{ 颜色：橙色； 字体大小：粗体； 背景：无； 边框：2倍实心 橙色 } .按钮_cstm _nxt{ 背景颜色：蓝色； 边界：无； 颜色：白色； 填充：10px； 文本对齐：居中； 文字装饰：无； 显示：内联块； 字体大小：35px； 利润：4倍2倍； 光标：指针； 边界半径：50%； 位置：相对位置； } .按钮：悬停{ 颜色：蓝色； 字体大小：粗体； 背景：无； 边框：2件纯蓝； } .按钮时间{ 背景色：FF8C00； 边界：无； 颜色：白色； 填充：10px； 文本对齐：居中； 文字装饰：无； 显示：内联块； 字体大小：35px； 利润：4倍2倍； 光标：指针； 边界半径：50%； } .按钮时间：悬停{ 颜色：FF8C00； 字体大小：粗体； 背景：无； 边框：2个实心FF8C00； } 集装箱运输{ 宽度：100%； } 左_cstm{ 浮动：左； 宽度：100px； } 对{ 浮动：对； 宽度：100px； } 中心{ 保证金：0自动； 宽度：100px； } 玩把戏{ 显示器：flex； /*建立flex容器*/ 弯曲方向：行； /*默认值；可以省略*/ 柔性包装：nowrap； /*默认值；可以省略*/ 证明内容：之间的空间； /*从默认flex启动切换，见下文*/ } 红十字会：之前， .红十字会：之后{ 位置：绝对位置； 内容：； 顶部：-5px； 底部：-5px； 宽度：5px； 背景：ff0000； 左：0； 右：0； 保证金：0自动； } 红十字会：以前{ 变换：倾斜30度； } .红十字会：之后{ 变换：倾斜-30度； } .disp_none{ 显示：无； } /*播放标题结束*/

不，我不确定 是的，锁定选项 -> 变量问题=[{ 问题一：问题一， 答:A,， 问题:3आत्मा के साथ दूध - पानी की तरह एकीभूत होने वाला कर्म -पुद्गल समूह कोनसा है ?A198206， 选项：[A、B、C、D]， 选项_文本：[बंध, पुण्य , पाप, आश्रव ], 答:A,， 锁定：错误 }]; var table=document.getElementByIdtest； var行=table.insertRow0； var cell1=row.insertCell0； 单元格1.colSpan=2； row.className='hidden_timer'； row.id='timer'； var i=0； VarO=1； var p=2； 函数生成问题{ //无检查注释器 i+=1； o+=2； p+=3； var newQuestion=` ${question.question}`； 变量显示选项1=` ${question.options[0]}${question.option_text[0]} ${question.options[1]}${question.option_text[1]} `; 变量显示选项2=` ${question.options[2]}${question.option_text[2]} ${question.options[3]}${question.option_text[3]} `; var row2=table.insertRow1； row2.innerHTML=newQuestion； var row3=table.insertRow2； 设置超时=>{ row3.innerHTML=显示选项1； }, 2000; var row4=table.insertRow3； setTimeoutfunction{ row4.innerHTML=显示选项2； }, 2000; } 功能选择{ var选择=e.currentTarget； var questionId=e.currentTarget.className； var currentQuestion=questions.findfunctionq{ 返回q.questionId==questionId }; $myModal.modal； document.getElementByIdm_q.innerHTML=+currentQuestion.question+； document.getElementByIdm_o.innerHTML=+selection.firstElementChild.innerText+； $myBtnC.clickfunction{ //onConfirme； selection.setAttribute'class'，'question1'； 选择=空； $'myModal'.modal'hide'； }; $myBtnO.clickfunction{ 如果当前问题已锁定{ 这个问题已经回答了； }如果currentQuestion.answer==selection.firstElementChild.innerText，则为else{ 警告正确！！！； }否则{ 不正确的。。。； } //生成问题[i]； $'myModal'.modal'hide'； }; } 功能启动测试{ 生成问题[i]； }

---

代码中没有什么问题，一个是选择变量需要在onSelect函数中声明它。 另一种是每次调用onSelect函数时都将jQuery.click事件绑定到按钮。 尝试将事件处理程序以及选择变量声明放在函数外部

 var selection;
 var currentQuestion;

function onSelect(e) {
  selection = e.currentTarget;
  var questionId = e.currentTarget.className;
  currentQuestion = questions.find(function(q) {
    return q.questionId == questionId
  }); 
   $("#myModal").modal();
   document.getElementById("m_q").innerHTML = "<h3>" + currentQuestion.question + "</h3>";
   document.getElementById("m_o").innerHTML = "<h2>" + selection.firstElementChild.innerText + "</h2>";



}
     $("#myBtnC").click(function(){
        //onConfirm(e);

        selection.setAttribute('class', 'question1');
        selection = null;
        $('#myModal').modal('hide');
    });

    $("#myBtnO").click(function(){

        if (currentQuestion.locked) {
  alert("Question already answered");
  } 
  else if (currentQuestion.answer === selection.firstElementChild.innerText) {
      alert("Correct!!!");
  } else {
    alert("Incorrect...");
  }
  //generateQuestion(questions[i]);


        $('#myModal').modal('hide');
    });

---

您正在使myBtnC的选择为空。请尝试删除该部分

试着改变一下，让我知道

function onSelect(e) {
    var selection = e.currentTarget;
    var preSelection = selection;
    var questionId = e.currentTarget.className;
    var currentQuestion = questions.find(function(q) {
        return q.questionId == questionId
    });
    $("#myModal").modal();
    document.getElementById("m_q").innerHTML = "<h3>" + currentQuestion.question + "</h3>";
    document.getElementById("m_o").innerHTML = "<h2>" + selection.firstElementChild.innerText + "</h2>";

    $("#myBtnC").click(function() {
        //onConfirm(e);
        if (!selection) {
            selection = preSelection;
        }

        selection.setAttribute('class', 'question1');
        selection = null;
        $('#myModal').modal('hide');
    });

    $("#myBtnO").click(function() {

        if (currentQuestion.locked) {
            alert("Question already answered");
        }

        if (!selection) {
            selection = preSelection;
        } else if (currentQuestion.answer === selection.firstElementChild.innerText) {
            alert("Correct!!!");

        } else {
            alert("Incorrect...");

        }
        selection = null;
        $('#myModal').modal('hide');
    });
}

非常适合我。现在根据你的要求优化这个

---

ents.

提供一个复制您描述的错误的示例。您可以发布完整的代码吗？看起来问题被声明在onSelect范围之外，或者你忘记声明了？@niklaz不要要求完整的代码，我们不希望这样，只需要复制错误。这是特定的代码，完整的代码在问题的第一行，也在，另外@LGSon我能得到你的第一个评论和我的问题之间的关系吗？“我的意思是，我的问题中有什么是不完整的？”namo，阅读LGSon评论中链接到的页面。请包含足够的代码，以便在问题本身中而不是在外部站点上重新创建错误。删除该部分将发出两次警报，您可以在删除该行后尝试相同的过程，您将得到我的意思…是的，您必须对其进行优化。现在添加了对代码的更改。使用这个，让我知道它是否有效。