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. 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>
Your random position only gets declared once. Move it inside of the function to randomize it everytime it gets clicked
<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>
You are calculating random transformX and transformY only once and using the same value every time inside the activateButton function.
You need to put the randomisation inside the function. Also I changed onmousedown to 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>