我的按钮只有在页面刷新后才有效

Question

所以我花了一些时间试图自己解决这个问题，然后才作为最后的手段来到这里。我总是可以在控制台中看到我的骰子掷骰数，但它不会显示在 DOM.It 中显示为未定义。我不得不回去修复我的代码，创建全局变量来找到我的随机数，然后在我的函数中使用它们。我还发现 console.log 在我的函数中返回我的函数未定义，所以我也删除了它们。所以此时我可以运行函数，现在可以看到 DOM 中显示的骰子数字，如果我运行一个 console.log() 函数外，我也可以在控制台看到骰子数，太棒了，成功了。那么现在按钮的问题来了。当我点击按钮时，我可以让骰子滚动，这很好，但是当它被点击时它不会再次滚动。它会再次滚动的唯一方法是当我刷新页面时。我现在不知道该怎么做，我尝试了一些不同的东西，我的功能正在为我的掷骰子工作，那些已经过测试，我的按钮正在工作，只是在点击时不再滚动。知道为什么会这样吗？我将感谢任何人花时间帮助我并让我知道我哪里出错了。我是编程新手，所以在进行过程中我仍然会犯错误。谢谢你的时间。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags-->
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <meta name="description" content="Kenzie" />
    <meta name="author" content="Kenzie" />
    <meta name="keywords" content="Kenzie" />

    <!-- Title Page-->
    <title>Kenzie JS and the DOM Assessment</title>

    <!-- CSS-->
    <link href="style.css" rel="stylesheet" media="all" />
  </head>

  <body>
    <!-- Your HTML Here! -->
    <button id="roll">Roll a Pair of Dice</button>
    <div id="result"></div>
    <div id="graph"></div>
    <script src="code.js"></script>
  </body>
</html>


let results = [null, null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

// Your Code Here!

let x = Math.floor(Math.random() * 6) + 1
let y = Math.floor(Math.random() * 6) + 1

function rollDie(){
   return x
}

function rollDice(){
  return x + y
  }


let roll = document.getElementById("roll")
let throwDice = roll.addEventListener('click',() => {
let k=  rollDice();
document.getElementById("result").innerHTML= `You rolled a ${k}!`

})


console.log(rollDice());

Answer 1

如果您按下按钮，函数 rollDice() 将被执行。问题是它一直显示相同的数字。那是因为你实际上不是 'rolling' 骰子。试试这个

function rollDice(){
    x = Math.floor(Math.random() * 6) + 1
    y = Math.floor(Math.random() * 6) + 1
    return x + y
}

我的按钮只有在页面刷新后才有效

My button works only after the page is refreshed

javascript

button