ボタンを押す度に1～6のランダムな数字を表示させる処理が分からない

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>JavaScript Basics</title>
6</head>
7<style>
8
9</style>
10<body>
11  <p id="number">number</p>
12  <button id="btn">ボタン</button>
13
14  <script src="js/main.js"></script>
15</body>
16</html>

JavaScript
1"use strict";
2
3{
4  const one = Math.floor(Math.random() * 6) + 1;
5
6document.getElementById("btn").addEventListener("click", () => {
7  document.getElementById("number").textContent = one;
8});
9}

JavaScriptを用いてボタンを押す度に1～6のランダムな数字を表示させるプログラムを作っています。
自分なりに考えた結果、上記のようなコードになりました。ボタンを押したら確かに1～6のランダムな数字は表示されるのですが、2回目に押すと何も動きません。何が原因なのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

2回目に押すと何も動きません。

2回めでもコードは動いているのだと思いますが、同じ数字を表示しているため何も変化がないのでしょう。クリックするより前にランダムな数字を1回だけ作っているためです。

const one = の行を ...textContent = one; の行の直前に持っていけば「クリックする度にランダムな数字を作る」ことになります。

投稿2021/04/26 01:35

int32_t

総合スコア21756

kirakira3003

2021/04/26 02:12

ありがとうございました！

行動規範の内容に同意します

ボタンを押すたびにランダム処理をいれないといけません

javascript
1document.getElementById("btn").addEventListener("click", () => {
2  const one = Math.floor(Math.random() * 6) + 1;
3  document.getElementById("number").textContent = one;
4});