如何在JavaScript
问题描述：
随机移动的图片我怎么能随意移动球，当我点击使用的addEventListener 鼠标我想这个代码，但画面不动了。这段代码有什么问题？如何在JavaScript
的html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="work.js"></script>
<link type="text/css" rel="stylesheet" href="work.css">
</head>
<body>
<div id = "frame" >
<div id = "net1"> </div>
<div id = "net2"> </div>
<div id = "centerPoint"> </div>
<div id = "centerLine"> </div>
<img src="SoccerBall.png" width="40" alt="Ball" class="moveBall">
</div>
</body>
</html>
JavaScript代码
var ball = document.querySelector('.moveBall');
function bbb(){
var ball = document.querySelector('.moveBall');
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
ball.style.left = x + 'px';
ball.style.top = y + 'px';
};
document.querySelector('#frame').addEventListener('click',bbb);
这是我的CSS代码：
#frame{
border:solid thick red;
border-width:3px;
padding-left:9px;
padding-top:6px;
padding-bottom:6px;
margin:2px;
width:1220px;
height:1000px;
float:right;
background-color:green;
}
.moveBall {
position:absolute;
top: 0px;
left: 0px;
}
#net1{
background-color: lightgray;
width: 400px;
padding: 40px;
margin: auto;
}
#net2{
background-color: lightgray;
width: 400px;
padding:40px;
margin:auto;
margin-top:840px;
答
添加样式position:absolute把球
(function() {
function bbb(){
var ball = document.querySelector('.moveBall');
console.log(ball);
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
ball.style.left = x + 'px';
ball.style.top = y + 'px';
};
document.querySelector('#frame').addEventListener('click',bbb);
})();#frame{
border:solid thick red;
border-width:3px;
padding-left:9px;
padding-top:6px;
padding-bottom:6px;
margin:2px;
width:1220px;
height:1000px;
float:right;
background-color:green;
}
.moveBall {
width:40px;
height:40px;
position:absolute;
top: 0px;
left: 0px;
border-radius:50%;
border:1px solid red;
}
#net1{
background-color: lightgray;
width: 400px;
padding: 40px;
margin: auto;
}
#net2{
background-color: lightgray;
width: 400px;
padding:40px;
margin:auto;
margin-top:840px;
}<div id = "frame" >
<div id = "net1"> </div>
<div id = "net2"> </div>
<div id = "centerPoint"> </div>
<div id = "centerLine"> </div>
<img src="http://via.placeholder.com/350x150" width="40" alt="Ball" class="moveBall">
</div>
把它包装成window.addEventListener（ “装载”，函数（）{... –
@Jonasw为什么有此必要？ – j08691
@ j08691 document.querySelector可能会失败，因为JS是元素 –