JavaScript - 如何使我可以重复 function？
[英]JavaScript - How to make it so that I can repeat the function?
问题描述
the code here is supposed to move the block in a random position in the webpage every time the button is clicked, but the function I wrote only moves the block once when the button is clicked.
这里的代码应该在每次单击按钮时在网页中随机移动 position 中的块，但我编写的 function 仅在单击按钮时移动一次块。 I am trying to make it so that every time the button is clicked, the block moves.我正在努力做到每次单击按钮时，块都会移动。 What should I do?我应该怎么办？
/*-- dont mind the css, I think nothings wrong here, maybe? --*/
body{
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box{
height: 170px;
width: 170px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgb(190, 46, 46);
transition: 0.5s;
}
<body>
<div class="box" id="box"></div>
<!-- I tried onclick and onmousedown functions, but they dont work-->
<button type="button" onmousedown="activationButton()">Click Me</button>
<script>
const box = document.getElementById("box");
const button = document.getElementById("activationButton");
const transformX = Math.floor(Math.random() * 300);
const transformY = Math.floor(Math.random() * 330);
const positionXY = Math.floor(Math.random() * 90);
// function doesn't repeat itself. I think it is because the variables transformX and
//transformY
// doesn't reset, thus it locks the block in place?
function activationButton() {
box.style.transform = `translate( -${transformX}%, -${transformY}%)`;
box.style.right = `${positionXY}%`
box.style.left = `${positionXY}%`
}
</script>
</body>
2 个解决方案
解决方案1
0 2022-04-21 05:10:48
Your random position only gets declared once.您的随机 position 只会被声明一次。 Move it inside of the function to randomize it everytime it gets clicked将它移到 function 中，以便在每次单击时随机化
<script>
const box = document.getElementById("box");
const button = document.getElementById("activationButton");
function activationButton() {
var transformX = Math.floor(Math.random() * 300);
var transformY = Math.floor(Math.random() * 330);
var positionXY = Math.floor(Math.random() * 90);
box.style.transform = `translate( -${transformX}%, -${transformY}%)`;
box.style.right = `${positionXY}%`
box.style.left = `${positionXY}%`
}
</script>
解决方案2
0 2022-04-21 05:12:02
You are calculating random transformX and transformY only once and using the same value every time inside the activateButton function.您只计算一次随机transformX和transformY ，并且每次都在activateButton function 内使用相同的值。
You need to put the randomisation inside the function. Also I changed onmousedown to onclick .您需要将随机化放在 function 中。另外我将onmousedown更改为onclick 。
const box = document.getElementById("box"); const button = document.getElementById("activationButton"); // function doesn't repeat itself. I think it is because the variables transformX and //transformY // doesn't reset, thus it locks the block in place? function activationButton() { const transformX = Math.floor(Math.random() * 300); const transformY = Math.floor(Math.random() * 330); const positionXY = Math.floor(Math.random() * 90); box.style.transform = `translate( -${transformX}%, -${transformY}%)`; box.style.right = `${positionXY}%` box.style.left = `${positionXY}%` }
button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }.box { height: 170px; width: 170px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgb(190, 46, 46); transition: 0.5s; }
<body> <div class="box" id="box">asd</div> <,-- I tried onclick and onmousedown functions, but they dont work--> <button type="button" onclick="activationButton()">Click Me</button> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.