Im trying to make a working site, where i pull 5 cards out of a deck. If the card is already in the deck, it shouldnt be able to pick it again. There’s also one card, the joker, which shouldnt be pickable. What happens now, i preview it and i pick 5 cards but its like this:
X
X,X
X,X,X
X,X,X,X
X,X,X,X,X
Also i want a button on it, to pull 5 new cards, but they shouldnt be the same cards i pulled before. First i have to pull all 52 cards, until it says there are no cards left.
Problems: My function isnt working, and even though i made this, the joker can still be drawn from the deck. Can someone have a look?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kaartenverdeler</title>
</head>
<body>
<button onclick="pullCards()"> Trek kaarten </button>
<p id="result"></p>
<script>
var cardDeck = ['H1','H2','H3','H4','H5','H6','H7','H8','H9','H10','H11','H12','H13','R1','R2','R3','R4','R5','R6','R7','R8','R9','R10','R11','R12','R13','J','K1','K2','K3','K4','K5','K6','K7','K8','K9','K10','K11','K12','K13','J','S1','S2','S3','S4','S5','S6','S7','S8','S9','S10','S11','S12','S13'];
var drawnCards = [];
for(i=1;i<=5;i++){ //In orde
var randomCards = Math.floor(Math.random()* cardDeck.length); // In orde
while(drawnCards.includes(cardDeck[randomCards] || cardDeck[randomCards] == "J")){
var randomCards = Math.floor(Math.random()* cardDeck.length);
}
drawnCards.push(cardDeck[randomCards]);
result += "<div>"+drawnCards+"</div> ";
document.getElementById('result').innerHTML = result;
function pullCards(){
var lastFiveCards = drawnCards.slice(-5);
var randomCards = Math.floor(Math.random()* cardDeck.length);
document.getElementById('result').innerHTML = result;
}
</script>
</body>
</html>