Question

该按钮应该将随机正方形的颜色更改为随机颜色。这是我的代码，我想出了如何同时更改每个正方形的随机颜色，但是一次只能选择一个随机正方形。你能看看吗？这些评论将向您展示我的思维方式：

// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');

//This picks a random number
const rgb = (num) => {
  return Math.floor(Math.random() * num);
};

const changeColorOfaRandomSquareToRandom = () => {
  //This I hope will pick a random square
  let array = [square1, square2, square3];
  let randomNumber = Math.floor[Math.random() * 3];

  // I assign the value of the randomSquare function to a new variable
  let squareRND = array[randomNumber];

  //This picks a random color
  let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
  return squareRND.style.backgroundColor = randomColor();


}

button.onclick = changeColorOfaRandomSquareToRandom();

#square1{
  background-color: lightpink;
  width:200px;
  height: 200px;
  display: flex;
  margin-top: 200px;
}


#square2{
  background-color: lightblue;
  width: 200px;
  height: 200px;
  display: flex;
  margin-top: 200px;

}

#square3{
  background-color: lightgreen;
  width: 200px;
  height: 200px;
  display: flex;
  margin-top: 200px;
}

#squares{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#button{
  width: 75px;
  height: 25px;
  margin-top: 20px;
  margin-left: 600px;

}

<html>
<head>
  <link href="squares.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="squares">
  <div id="square1" onclick="colorChange">
  </div>
  <div id="square2">
  </div>
  <div id="square3">
  </div>
</div>
  <button id="button">Click me</button>
    <script src="square.js" ></script>
</body>
</html>

Answer 1

在您的let array = ['square1', 'square2', 'square3'];中

，如果您直接传递变量而不是字符串，则它应该可以工作。现在您正在做'square1'.style.backgroundColor =

Answer 2

在randomSquare方法中，您必须返回document.getElementById(array[randomNumber])

例如

let randomSquare = () => {
 ...
  return document.getElementById(array[randomNumber]);
};

Answer 3

尝试使用此代码，我尚未测试：

// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');

//This picks a random number
const rgb = (num) => {
  return Math.floor(Math.random() * num);
};

const changeColorOfaRandomSquareToRandom = () => {
  //This I hope will pick a random square
  let array = [square1, square2, square3];
  let randomNumber = Math.floor[Math.random() * 3];

  // I assign the value of the randomSquare function to a new variable
  let squareRND = array[randomNumber];

  //This picks a random color
  let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
  squareRND.style.backgroundColor = randomColor;
}

button.onclick = changeColorOfaRandomSquareToRandom;

您不会在任何地方调用上一个函数colorChange()，我不明白为什么要在click事件函数中创建函数。

Answer 4

在您的代码中，this.IsEnabled = false; await Navigation.PushAsync(new MyPage()); this.IsEnabled = true;应该放在括号内，而不是像方括号那样：

Math.floor

然后，您应该通过let randomNumber = Math.floor(Math.random() * 3);的ID来获取元素，例如：

squareRND

您还应该运行document.getElementById(squareRND).style.backgroundColor = randomColor

例如：

colorChange();

let button = document.getElementById('button');
const changeColorOfaRandomSquareToRandom = () => {
  //This I hope will pick a random square
  let randomSquare = () => {
    let array = ['square1', 'square2', 'square3'];
    let randomNumber = Math.floor(Math.random() * 3);
    return array[randomNumber]
  };

  // I assign the value of the randomSquare function to a new variable
  let squareRND = randomSquare();
  console.log(randomSquare());
  //This picks a random number
  let rgb = (num) => {
    return Math.floor(Math.random() * num);
  };

  //This picks a random color
  let colorChange = () => {
    let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
    document.getElementById(squareRND).style.backgroundColor = randomColor;
  };
  colorChange();
};

button.onclick = changeColorOfaRandomSquareToRandom;

#square1 {
  background-color: lightpink;
  width: 200px;
  height: 200px;
  display: flex;
  margin-top: 200px;
}

#square2 {
  background-color: lightblue;
  width: 200px;
  height: 200px;
  display: flex;
  margin-top: 200px;
}

#square3 {
  background-color: lightgreen;
  width: 200px;
  height: 200px;
  display: flex;
  margin-top: 200px;
}

#squares {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#button {
  width: 75px;
  height: 25px;
  margin-top: 20px;
  margin-left: 600px;
}

Answer 5

我试图解决它，最后（偶然）我做到了！：D 让我告诉你：

// Elements grabbed from the document
let square1 = document.getElementById('square1');
let square2 = document.getElementById('square2');
let square3 = document.getElementById('square3')
let button = document.getElementById('button');

let squares = ['square1', 'square2', 'square3'];

//This picks a random square from the array and changes color
const randomize = () => {
  let randomSquare = squares[Math.floor(Math.random() * squares.length)];
  let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
  document.getElementById(randomSquare).style.background = randomColor;
}

//Draws a number for a random color
let rgb = (num) => {
return Math.floor(Math.random() * num)
};

  //Function attached to a button
button.onclick = randomize;

#square1{
  background-color: lightpink;
  width:200px;
  height: 200px;
  display: flex;
}


#square2{
  background-color: lightblue;
  width: 200px;
  height: 200px;
  display: flex;

}

#square3{
  background-color: lightgreen;
  width: 200px;
  height: 200px;
  display: flex;
}

#squares{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#button{
  width: 75px;
  height: 25px;
  margin-top: 20px;
  margin-left: 600px;

}

<!DOCTYPE html>
<html>
<head>
  <link href="squares.css" type="text/css" rel="stylesheet"/>
  <script src="square.js" defer></script>
</head>
<body>
<div id="squares">
  <div id="square1" onclick="colorChange">
  </div>
  <div id="square2">
  </div>
  <div id="square3">
  </div>
</div>
  <button id="button">Click me</button>
</body>
</html>

在JavaScript中生成随机正方形的随机颜色

5 个答案: