Javascript 控制台中的错误：未捕获类型错误：无法读取属性'；getAttribute'；空的

我的控制台有一个错误

未捕获的TypeError:无法在处读取null的属性“getAttribute” Object.game.map.GenerateBlocked（main.js:57）位于Object.game.new （start.js:17）位于HTMLButtonElement.onclick（index.html:56）

我不知道是什么导致了这个错误

//main.js

//****************************** Initialise les obstacles ******************************//


game.map.genererateBlocked = function (nb) {

  for (var i = 0; i < nb; i++) {
    var x = Math.ceil(Math.random() * 10); //genere un nombre entre 1 et 10
    var y = Math.ceil(Math.random() * 10);

    var blocked = document.querySelector(".square[data-x='" + x + "'][data-y='" + y + "']"); // on recupere la case

    if (blocked.getAttribute("type") === "") { // test si la case est vide
      blocked.setAttribute("type", "blocked"); // on defini le type a blocked
      blocked.classList.add("blocked"); // on attribue la classe blocked
    } else {
      i--; // si la case n'est pas vide on recommence l'iteration
    };
  }
}

//index.html

<button onclick="game.new();" id="newgame">Nouvelle Partie</button>

新党

---

添加检查是否确实找到了块。修改行：

if (blocked.getAttribute("type") === "") { // test si la case est vide

致：

---

很好，我找到了我的答案，它是要生成的数字，设置为7

game.map.genererateBlocked = function (nb) {

  for (var i = 0; i < nb; i++) {
    var x = Math.ceil(Math.random() * 7); 
    var y = Math.ceil(Math.random() * 7);

    var blocked = document.querySelector(".square[data-x='" + x + "'][data-y='" + y + "']"); // on recupere la case

    if (blocked.getAttribute("type") === "") { 
      blocked.setAttribute("type", "blocked"); 
      blocked.classList.add("blocked"); 
    } else {
      i--; 
    };
  }
}

game.map.GenerateBlocked=函数（nb）{
对于（变量i=0；i

我相信这是因为

blocked

为空，所以请尝试将其记录并检查。您还可以记录

“.square[data-x=”“+x+”]”][data-y=“+y+”]”]

并查看它是否按预期填充。向我们显示您的HTMLY查询选择器似乎与任何元素都不匹配也是一个好主意。我们唯一能说的是您的

文档。querySelector

返回

null

，这意味着它找不到给定选择器的元素。但是，如果不知道

square

元素的外观，我们就无法真正回答您的问题。请提供一个。当然，它修复了错误。但是现在脚本将执行

else

分支。这真的是应该发生的吗？@Ivar，Tbh我不确定它是否应该或不应该进入else语句如果它没有找到，我不相信，但如果它为空，我将是一个很好的解决方案。最好的解决办法是找出它返回null的原因。@CarstenLøvboAndersen我不确定我是否完全明白你的意思

null

是一个假值，因此不会执行if语句，而执行

else

语句。我完全同意一个好的解决方案是找出

querySelector

找不到元素的原因。很可能脚本没有预料到无法找到该元素，因此简单地使用

else

分支似乎不是正确的方法。@Ivar我不确定else子句。也许根本没有必要。我看不到弗雷赫对正在发生的事情的评论。刚刚解决了最初的技术问题。。。

if (blocked && blocked.getAttribute("type") === "") { // test si la case est vide

game.map.genererateBlocked = function (nb) {

  for (var i = 0; i < nb; i++) {
    var x = Math.ceil(Math.random() * 7); 
    var y = Math.ceil(Math.random() * 7);

    var blocked = document.querySelector(".square[data-x='" + x + "'][data-y='" + y + "']"); // on recupere la case

    if (blocked.getAttribute("type") === "") { 
      blocked.setAttribute("type", "blocked"); 
      blocked.classList.add("blocked"); 
    } else {
      i--; 
    };
  }
}