I want to obtain different height values for each div in both the 'CardContainer' and 'Two' divs. I would like to randomize those values upon each click event without repeating any of the values in the array.
HTML
<html>
<button id="press" type="Button" value="Shake">Test</button>
<div id="cardContainer"></div>
<div id="two"></div>
<div id="three"></div>
</html>
CSS
#cardContainer div {border:solid 1px black; width: 20px;}
#two {border:solid 1px black; width: 20px; position: absolute; top: 20px; left: 50px;}
button {display: block;}
JS
var balls90 = ['1px', '5px', '10px', '20px', '40px', '80px', '160px', '320px'];
var cardContainer= document.getElementById("cardContainer");
var two= document.getElementById("two");
var $all = $("#cardContainer").push(balls90);
var $next = $("#two").push(balls90);
function getNumbers() {
var player1 = new Array();
balls90.sort(function() {
return [Math.floor(Math.random() * balls90.length)];
});
$("#press").click(function() {
$("#cardContainer").empty();
});
document.getElementById("press").addEventListener('click',getNumbers,true);
for (var i = 1; i <= 4; i++) {
var div = document.createElement("div");
div.style.height = (balls90[i]);
cardContainer.appendChild(div);
}
}
getNumbers();
function getMore() {
var player1 = new Array();
balls90.sort(function() {
return [Math.floor(Math.random() * balls90.length)];
});
$("#press").click(function() {
$("#two").empty();
});
document.getElementById("press").addEventListener('click',getMore,true);
for (var i = 1; i <= 4; i++) {
var div = document.createElement("div");
div.style.height = (balls90[i]);
div.style.border = "thin solid black";
two.appendChild(div);
}
}
getMore();
Aucun commentaire:
Enregistrer un commentaire