Question

我有一个练习来使用Javascript创建一个反应游戏。我需要创建具有随机位置和颜色的随机正方形和圆形。我需要能够单击这些形状，并使其到达该随机形状在另一个随机位置和随机颜色处弹出的位置。我的点击事件重新运行功能不起作用，我在做什么错？当我也刷新页面，尝试创建一个单独的按钮标签并为其分配一个ID来执行类似单击功能时，它仍然有效，但仍然无法正常工作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test 2</title>
</head>

<style type="text/css">

#box1 {
position:relative;

}

</style>



<body>

<h1>Test Your Reactions!</h1>

<p>Click on the boxes and circle as quickly as you can!</p>

<p><strong>Your time:</strong></p>

<div id = "box1"></div>

<script type = "text/javascript">


function randomColor() {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
document.getElementById("box1").style.backgroundColor=bgColor;
console.log(bgColor);
}

function randomPosition() {

var pixel = Math.floor(Math.random() * 1000);
var pixel2 = Math.floor(Math.random() * 350);
var position = pixel+"px";
var position2 = pixel2+"px";
document.getElementById("box1").style.marginLeft = position;
document.getElementById("box1").style.marginTop = position2;
console.log(position);
console.log(position2);
}

function randomSize() {
s= Math.floor(Math.random() * (200 - 300) + 200);
sPixels = s + "px";
document.getElementById("box1").style.width = sPixels;
document.getElementById("box1").style.height = sPixels;
var circle = Math.floor(Math.random() * 2);
if (circle == 1) {

document.getElementById("box1").style.borderRadius="50%";

} else {

document.getElementById("box1").style.borderRadius="none";
}
console.log(sPixels);

}
document.getElementById("box1").onclick = randomColor(); randomPosition(); randomSize();
</script>

</body>

</html>

Answer 1

您需要更改为

document.getElementById("box1").addEventListener("click", 
 function(){randomColor(); randomPosition(); randomSize();})

或

document.getElementById("box1").onclick = 
   function(){randomColor(); randomPosition(); randomSize()};

由于使用了代码，因此您只分配了randomColor()方法来单击事件。

randomPosition(); randomSize()在页面加载时运行1次。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test 2</title>
</head>

<style type="text/css">

#box1 {
position:relative;

}

</style>



<body>

<h1>Test Your Reactions!</h1>

<p>Click on the boxes and circle as quickly as you can!</p>

<p><strong>Your time:</strong></p>

<div id = "box1">A</div>

<script type = "text/javascript">


function randomColor() {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
document.getElementById("box1").style.backgroundColor=bgColor;
console.log(bgColor);
}

function randomPosition() {

var pixel = Math.floor(Math.random() * 1000);
var pixel2 = Math.floor(Math.random() * 350);
var position = pixel+"px";
var position2 = pixel2+"px";
document.getElementById("box1").style.marginLeft = position;
document.getElementById("box1").style.marginTop = position2;
console.log(position);
console.log(position2);
}

function randomSize() {
s= Math.floor(Math.random() * (200 - 300) + 200);
sPixels = s + "px";
document.getElementById("box1").style.width = sPixels;
document.getElementById("box1").style.height = sPixels;
var circle = Math.floor(Math.random() * 2);
if (circle == 1) {

document.getElementById("box1").style.borderRadius="50%";

} else {

document.getElementById("box1").style.borderRadius="none";
}
console.log(sPixels);

}

document.getElementById("box1").onclick = function(){randomColor(); randomPosition(); randomSize()};
//document.getElementById("box1").addEventListener("click", function(){randomColor(); randomPosition(); randomSize();})
</script>

</body>

</html>

Answer 2

此行是错误的：

document.getElementById("box1").onclick = randomColor(); randomPosition(); randomSize();

您正在将对randomColor（即undefined）的调用结果分配给onclick处理程序，而不是函数。而且，单击时不会调用其他功能，只有在第一次加载页面时。

我建议您创建一个新功能，其中包含用户单击框时要执行的所有操作：

function clickOnBox() {
  randomPosition();
  randomSize();
  randomColor();
}

然后您可以像这样绑定它：

document.getElementById("box1").onclick = clickOnBox; // assign the function as click handler
clickOnBox(); // call it the first time.

由于您有很多重复，因此我对您的代码进行了一些清理。

// Save reference to box1.
const box1 = document.getElementById("box1");

// function to get a random integer
function rndint(max) {
  return Math.floor(Math.random() * max);
}

// function to get a pixel string
function pixel(value) {
  return value + 'px';
}

function randomColor() {
  const max = 256;
  box1.style.backgroundColor =
    `rgb(${rndint(max)},${rndint(max)},${rndint(max)})`;
}

function randomPosition() {
  box1.style.marginLeft = pixel( rndint(1000) );
  box1.style.marginTop = pixel( rndint(350) );
}

function randomSize() {
  box1.style.width = box1.style.height = pixel( (rndint( 100 ) + 100) );
  if ( rndint(2) ) {
    box1.style.borderRadius = "50%";
  } else {
    box1.style.borderRadius = "none";
  }
}

function clickOnBox() {
  randomPosition();
  randomSize();
  randomColor();
}

box1.onclick = clickOnBox;
clickOnBox();

无法使用带有div元素的“ onclick”调用函数

2 个答案: