JavaScript - How to make it so that I can repeat the function?-CodePudding

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  id="box"></div>
      <!-- I tried onclick and onm ousedown functions, but they dont work-->
      <button type="button" onm ousedown="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>

CodePudding user response：

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>

CodePudding user response：

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  id="box">asd</div>
  <!-- I tried onclick and onm ousedown functions, but they dont work-->
  <button type="button" onclick="activationButton()">Click Me</button>

</body>