2

I am trying to create a scenario where something on the page is clicked, then a h1 will appear in a random place. However, I would then like that first h1 to stay in place and another appear in another random place and so on after each click. If the button was clicked continuously then the page will fill up with the same h1 tag. Almost like when Windows has a melt and loads of the same pop ups "pop up" and you have to click to get rid of them. I've tried doing this myself from searching other questions, but the code gets quite complicated when trying to adapt it from other users questions and answers.

So far I have managed to get the h1 tag to move randomly around the page. I've also managed to get it to clone the h1. However at the moment it all stays in one long list (apart from the original instance), instead of stopping in place with each instance as I'd like.

I've seen many different versions of creating the random part, so I'm entirely open to any ideas or completely new code to get this working.

{ $(document).ready(function () { $(".btn").click(function () { var bodyWidth = document.body.clientWidth; var bodyHeight = document.body.clientHeight; var randPosX = Math.floor(Math.random() * bodyWidth); var randPosY = Math.floor(Math.random() * bodyHeight); $(".words").clone().appendTo("body"); $(".words").css("left", randPosX); $(".words").css("top", randPosY); }); }); }
body { margin: 0; padding: 0; background-color: white; } .words { position: relative; color: black; font-size: 20px; left: 0; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <h1 class="words"> Hello! </h1> <button class="btn" type="button">Click Me!</button> </body>

https://jsfiddle.net/ynaj45m6/33/#&togetherjs=F9Vjsf1Uij

Improve this question

2 Answers 2

Reset to default
3

There's two issues in your code. Firstly, $('.words') selects all the h1 elements, so when you update their css() you're moving every single one of them. Instead, keep a reference to the cloned element and move that one only.

Similarly, if you only want to clone a single instance per click you need to select one .words element only, not all of them, and :first can be used for that. Try this:

jQuery($ => { $(".btn").click(function() { let bodyWidth = document.body.clientWidth; let bodyHeight = document.body.clientHeight; let randPosX = Math.floor(Math.random() * bodyWidth); let randPosY = Math.floor(Math.random() * bodyHeight); let $clone = $(".words:first").clone().appendTo("body"); $clone.css({ left: randPosX, top: randPosY }); }); });
body { margin: 0; padding: 0; background-color: white; } .words { position: relative; color: black; font-size: 20px; left: 0; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <h1 class="words"> Hello! </h1> <button class="btn" type="button">Click Me!</button>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Sorry to bother you again, but do you know if there is a way to trigger this more than once with a single click? So click once and the h1's keep coming one after the other? Perhaps with a for loop or something, so the amount of instances can be defined? Thank you!
Sure, you could use an interval to call a function at a given delay which adds a new h1 to the page
1

You are almost there. There are 2 mistakes in your code. The first one is that the position should be absolute instead of relative. The second one is that you move all h1 to the new position. You only need to move the cloned one.

.words { position: absolute; } $(".cheeky").clone().appendTo(".wrapper").css("left", randPosX).css("top", randPosY);
Improve this answer

1 Comment

Aha, I'm guessing I hadn't saved the fiddle properly, given the mixed up classes. I did simplify the whole thing to basics. Thank you for your answer!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.