Position 5 divs randomly
Question
I'm completely stuck here. I'm trying to create a program where i have 5 different divs. They need to be placed at random position when running the program. And they need to switch position when i drag my mouse over them. So far i've done this. (which is completely wrong).
function Init()
{
div = document.getElementById("pixel");
div = document.getElementById("pixel1");
div = document.getElementById("pixel2");
div = document.getElementById("pixel3");
div = document.getElementById("pixel4");
spaceW = screen.height - div.height;
spaceH = screen.width - div.width;
setTimeout(moveIt, 0);
}
function moveIt()
{
div.style.top = (100*Math.random()) + "%";
div.style.left = (100*Math.random()) + "%";
}
<body onload="Init()">
<div id="pixel" style="background-color:blue; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel1" style="background-color:green; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel2" style="background-color:orange; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel3" style="background-color:yellow; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel4" style="background-color:red; position:fixed; height:50px; width:50px; font-size:25px;"/>
</body>
Can someone nudge me in the right direction because this clearly doesn't work.
2 answers
solution1
1 2018-01-21 13:02:08
check out after fix some syntax error like Pal Singh mention AND
- add all div(s) to one array so can be easy to control it
- add [ getRandomNum() , percentwidth() , percentHeight() ] functions to keep div(s) in page
- add moveIt() function to do some animation when move
function RandomIt() { var div_array = []; div_array.push(document.getElementById("pixel")); div_array.push(document.getElementById("pixel1")); div_array.push(document.getElementById("pixel2")); div_array.push(document.getElementById("pixel3")); div_array.push(document.getElementById("pixel4")); div_array.forEach(function(entry) { moveIt(entry,getRandomNum(1,100 - percentwidth(entry)),getRandomNum(1,100 - percentwidth(entry))) }); } function getRandomNum(min, max) { return Math.random() * (max - min) + min; } function percentwidth(elem){ return ((elem.offsetWidth/window.innerWidth)*100).toFixed(2); } function percentHeight(elem){ return ((elem.offsetHeight/window.innerHeight)*100).toFixed(2)+'%'; } function moveIt(elem,target_x,target_y) { var pos_x = 0; var pos_y = 0; var id = setInterval(frame, 5); function frame() { if (pos_x == target_x && pos_y == target_y) { clearInterval(id); } else { if(pos_x < target_x){ pos_x++; elem.style.left = pos_x + '%'; } if(pos_y < target_y){ pos_y ++; elem.style.top = pos_y + '%'; } } } }
<body onload="RandomIt()"> <button onclick="RandomIt()">RandomIt</button> <div id="pixel" style="background-color:blue; position:fixed; height:50px; width:50px; font-size:25px;"></div> <div id="pixel1" style="background-color:green; position:fixed; height:50px; width:50px; font-size:25px;"></div> <div id="pixel2" style="background-color:orange; position:fixed; height:50px; width:50px; font-size:25px;"></div> <div id="pixel3" style="background-color:yellow; position:fixed; height:50px; width:50px; font-size:25px;"></div> <div id="pixel4" style="background-color:red; position:fixed; height:50px; width:50px; font-size:25px;"></div> </body>
solution2
0 ACCPTED 2018-01-21 12:22:09
I've added your code to fiddle: https://jsfiddle.net/x05b5suz/2/
Few things I would like to tell you:
div = document.getElementById("pixel");
div = document.getElementById("pixel1"); // This is wrong
div = document.getElementById("pixel2");
You should declare your variable with var keyword and their name should be unique in a scope of a function otherwise you are just overwriting them. So you can name them var div1 , var div2 so on.
In HTML, you need to close your <div>...</div> tags, div are not supposed to be quick closed.
I hope this helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.