Se supone que el código aquí mueve el bloque en una posición aleatoria en la página web cada vez que se hace clic en el botón, pero la función que escribí solo mueve el bloque una vez cuando se hace clic en el botón. Estoy tratando de hacer que cada vez que se haga clic en el botón, el bloque se mueva. ¿Qué tengo que hacer?
/*-- 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>
Tu posición aleatoria solo se declara una vez. Muévalo dentro de la función para aleatorizarlo cada vez que se haga clic en él
<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>Está calculando transformX y transformY aleatorios solo una vez y usando el mismo valor cada vez dentro de la función activateButton .
Necesitas poner la aleatorización dentro de la función. También cambié onmousedown a 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>