Javascript 无法使用“调用函数”；onclick"；使用div元素_Javascript_Html_Css

Javascript 无法使用“调用函数”；onclick"；使用div元素

javascript html css

Javascript 无法使用“调用函数”；onclick"；使用div元素,javascript,html,css,Javascript,Html,Css,我有一个练习来创建一个对Javascript的反应游戏。我需要创建具有随机位置和颜色的随机正方形和圆形。我需要的能力，以点击的形状，使它的地方，这个随机形状弹出在另一个随机位置和随机颜色。我重新运行函数的点击事件不起作用，我做错了什么？当我刷新页面，尝试创建一个单独的按钮标签，并为它分配一个ID来执行像那样的点击功能时，它也可以工作，但仍然不起作用 <!DOCTYPE html> <html lang="en"> <head> <meta charset

我有一个练习来创建一个对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>


测试2
#框1{
位置：相对位置；
}
测试你的反应！
点击方框，尽可能快地画圆圈
您的时间：
函数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）；
}
函数randomPosition（）{
var pixel=Math.floor（Math.random（）*1000）；
var pixel2=Math.floor（Math.random（）*350）；
变量位置=像素+“px”；
变量位置2=像素2+“px”；
document.getElementById（“box1”）.style.marginLeft=位置；
document.getElementById（“box1”）.style.marginTop=position2；
控制台日志（位置）；
控制台日志（位置2）；
}
函数大小（）{
s=Math.floor（Math.random（）*（200-300）+200）；
像素=s+“px”；
document.getElementById（“box1”）.style.width=sPixels；
document.getElementById（“box1”）.style.height=sPixels；
var circle=Math.floor（Math.random（）*2）；
如果（圆==1）{
document.getElementById（“box1”）.style.borderRadius=“50%”；
}否则{
document.getElementById（“box1”）.style.borderRadius=“无”；
}
console.log（像素）；
}
document.getElementById（“box1”）.onclick=randomColor（）；随机位置（）；随机大小（）；

您需要更改为

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

或

因为对于您的代码，您只分配

randomColor（）

方法来单击事件

randomPosition（）；randomSize（）

页面加载时运行1次


测试2
#框1{
位置：相对位置；
}
测试你的反应！
点击方框，尽可能快地画圆圈
您的时间：
A.
函数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）；
}
函数randomPosition（）{
var pixel=Math.floor（Math.random（）*1000）；
var pixel2=Math.floor（Math.random（）*350）；
变量位置=像素+“px”；
变量位置2=像素2+“px”；
document.getElementById（“box1”）.style.marginLeft=位置；
document.getElementById（“box1”）.style.marginTop=position2；
控制台日志（位置）；
控制台日志（位置2）；
}
函数大小（）{
s=Math.floor（Math.random（）*（200-300）+200）；
像素=s+“px”；
document.getElementById（“box1”）.style.width=sPixels；
document.getElementById（“box1”）.style.height=sPixels；
var circle=Math.floor（Math.random（）*2）；
如果（圆==1）{
document.getElementById（“box1”）.style.borderRadius=“50%”；
}否则{
document.getElementById（“box1”）.style.borderRadius=“无”；
}
console.log（像素）；
}
document.getElementById（“box1”）.onclick=function（）{randomColor（）；randomPosition（）；randomSize（）}；
//document.getElementById（“box1”）.addEventListener（“单击”，函数（）{randomColor（）；randomPosition（）；randomSize（）；}）

此行错误：

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

您正在将调用randomColor（未定义）的结果分配给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();

谢谢你的帮助，它工作了，也谢谢你的代码组织技巧，我在这方面还是很新的@Ctech21很明显，您对这一点还不熟悉；）这就是为什么我认为我应该给你一些改进的建议。这里有一些建议：当你写代码时，看到你一遍又一遍地写同样的东西，比如

Math.floor（Math.random（）*256）或<代码>文档.GETelEnMyBID（“BOX1”），考虑是否应该创建函数或将值放入变量中。它不太容易打字，因此出错的地方也少了。谢谢你的帮助，对编码和Javascript还是很陌生的，非常感谢。
// 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();