How to make a button that teleports randomly on the website onclick

At the moment I wanted to create a button that teleports randomly back and forth on my website. As I am very new to JavaScript, I did not get it right. That’s why I don’t have a code. I found this question but it didn’t help me.

Here’s the Code i used:

document.getElementById("button").style.margin = Math.floor(Math.random() * 100);
<button id="button">Teleport</button>

Do you have any ideas how I could do this with HTML, CSS and JavaScript?

Thanks in advance!

42 thoughts on “How to make a button that teleports randomly on the website onclick”

  1. Without going into it too much:

    document.getElementById('button').onclick = function(){
      this.style.margin = Math.floor(Math.random()*100)+'%';
    }
    <button id='button'>Teleport</button>
    Reply
  2. document.addEventListener("DOMContentLoaded", function(){
    
      var rnd = Math.random()
      var button = document.getElementById('magic');
          
      if (rnd > .25) {
    
        
        button.style.display = 'block'
        button.style.top = Math.random() * 100 + '%'
        button.style.left = Math.random() * 100 + '%'
      }else{
        button.style.display='none'
      }
     
    });
      
    body {
      position: relative;
      height: 100vh;
    }
    
    button {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
    <button id='magic' onclick='myFunction()'>teleport</button>
    Reply

Leave a Comment