Question

我正在学习Udemy课程，其中一项练习是制作骰子游戏。

基本上，屏幕上只有两个骰子（每个玩家/利益相关者）都显示值为6。刷新时，它应该“掷骰子”（为每个骰子生成一个随机面，都是图像），并且标题文本应更改以说明游戏的结果。

但是我的代码无法刷新。我正试图找出原因。这是我的代码与教师代码的比较：

这是我的代码，在刷新时不起作用（但是我已经对其进行了测试，并且在将其作为函数运行时可以工作）。


//Generating Random Numbers for Dice 1 & Dice 2
    var RandomNo1 = (Math.floor(Math.random() * 6) + 1)
    var RandomNo2 = (Math.floor(Math.random() * 6) + 1)

//Making a var for image sources Dice 1-6 (images/dice#.png)
    var imageSource1 = ("images/dice" + RandomNo1 + ".png")
    var imageSource2 = ("images/dice" + RandomNo2 + ".png")

//set.Attribute function to change the img source for the dice
    document.querySelector('.player1').setAttribute("src", imageSource1);
    document.querySelector('.player2').setAttribute("src", imageSource2);

//Setting conditional statements to change the header depending on results of the dice roll.

     if (RandomNo1 > RandomNo2) {
         document.querySelector("h1").innerText="Player 1 Wins!";
       }

     else if (RandomNo2 > RandomNo1) {
         document.querySelector("h1").innerText="Player 2 Wins!";
       }

     else {
         document.querySelector("h1").innerText="It's a draw!";
       }

这是讲师的代码，确实在刷新时起作用。


var randomNumber1 = Math.floor(Math.random() * 6) + 1; //1-6

var randomDiceImage = "dice" + randomNumber1 + ".png"; //dice1.png - dice6.png

var randomImageSource = "images/" + randomDiceImage; //images/dice1.png - images/dice6.png

var image1 = document.querySelectorAll("img")[0];

image1.setAttribute("src", randomImageSource);


var randomNumber2 = Math.floor(Math.random() * 6) + 1;

var randomImageSource2 = "images/dice" + randomNumber2 + ".png";

document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2);


//If player 1 wins
if (randomNumber1 > randomNumber2) {
  document.querySelector("h1").innerHTML = "? Play 1 Wins!";
}
else if (randomNumber2 > randomNumber1) {
  document.querySelector("h1").innerHTML = "Player 2 Wins! ?";
}
else {
  document.querySelector("h1").innerHTML = "Draw!";
}

刷新时她的页面如何更改？为什么加载后没有立即更改？为什么我的代码（如她的代码）无法刷新？

Answer 1

您的脚本很好。本质上，它的作用与您的老师提供的脚本相同。老实说，您的脚本在多个方面都比较好，尤其是因为您在整个脚本中都添加了解释性注释，而且我真的希望看到某人使用.innerText，而不是{{1 }}。后者实际上是为了注入HTML，因此您正确选择了.innerHTML。就个人而言，我会使用.innerText，但这只是a detail。

剩下的唯一解释是，当DOM还没有准备好时，脚本运行得太早了，因此.textContent调用返回querySelector()。

将undefined元素移到HTML文档的末尾，然后在脚本中需要寻址的其他元素之后。一个合适的放置位置是在结束<script>标记之前。

Answer 2

欢迎使用stackoverflow！

您的代码中有一些错误：

不要以大写字母开头变量名，这些变量名用于命名构造函数。（这是一种不言而喻的法律，它也可以使您的代码对其他开发人员也更具可读性）
在您向我们展示的代码中，我认为这不是问题。我认为你应该将脚本标签粘贴到html文件的末尾，以便document.querySelector()可以选择html元素。
我用笔here书写了代码，并向您展示了它的工作原理。（我刚刚将$element.setAttribute("src")更改为$element.innerText）
- 您也可以使用$element.src =代替$element.setAttribute("src")

为什么我的JavaScript代码无法刷新？

2 个答案: