How to change style of an array element depends on function result in JavaScript?
Question
I am new here and I am learning programming and I have some doubts about how can I change the style of each function result. I´m trying to do a poker card that change my elements array for icons depends on the function result and I don´t know how to do it. Could you help me please?
var cardSuits = ['spades', 'diamonds', 'hearts', 'clubs']; var cardValue = [ '1','2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; const GenerateRandomCard = () => { let cardSuitsRandom = Math.floor(Math.random() * (cardSuits.length)); console.log(cardSuitsRandom); let cardValueRandom = Math.floor(Math.random() * (cardValue.length)); return '<div>' + cardSuits[cardSuitsRandom] + '</div>' + '<div>' + cardValue [cardValueRandom] + '</div>' + '<div>'+ cardSuits[cardSuitsRandom] + '</div>' }; window.onload = () => { document.querySelector('#cardMap').innerHTML = GenerateRandomCard(); }
body { background-color: green } #cardMap { display: flex; flex-direction: row; flex-wrap: wrap; margin: 80px auto 10px auto; height: 420px; width: 360px; background-color: white; border-radius: 5px; }.allCard { font-size: 16px; }.heartCard { }.spadeCard { }.diamondCard { }.clubCard { }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="index.css"> <title>Random Card</title> </head> <body> <div id="cardMap"></div> <script type="text/javascript" src="index.js"></script> </body> </html>
3 answers
solution1
0 2020-05-01 18:49:30
Replace .allCard{} with .card{}
Use the .card{} selector to put all the common styles that should be there regardless of the type of card.
So I guess
.card{
font-size: 16px;
}
And then in your javascript code
var element = document.getElementById("cardMap");
element.classList.add(cardSuitsRandom);
Will add the classes with the card suit, so if you pull a heart, the class will look like class="card hearts"
And then make selectors in your css like
card.spades{} , card.hearts{} , etc
solution2
0 2020-05-01 18:53:48
You could do this:
return '<div class="'+cardSuits[cardSuitsRandom]+' value-'+cardValue[cardValueRandom]+'"></div>;
So you add the results of the randomly generated suit and card value to your returned <div> 's classes, and then you style the classes accordingly.
solution3
0 2020-05-01 18:54:11
To assign a CSS rule with each suit, create an array of rule names that map to the suit names:
var cardSuits = ['spades', 'diamonds', 'hearts', 'clubs'];
const cardStyles = ['spadeCard', 'diamondCard', 'heartCard', 'clubCard'];
Then simply add the class to the div:
return `<div class="${cardStyles[cardSuitsRandom]}">` + ...
};
A working example with a few additional styling enhancements:
const cardSuits = ['spades', 'diamonds', 'hearts', 'clubs']; const cardStyles = ['spadeCard', 'diamondCard', 'heartCard', 'clubCard']; const cardSymbols = ['♠️', '♦️', '♥️', '♣️']; const cardValue = ['1','2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; const GenerateRandomCard = () => { let cardSuitsRandom = Math.floor(Math.random() * (cardSuits.length)); let cardValueRandom = Math.floor(Math.random() * (cardValue.length)); return `<div class="${cardStyles[cardSuitsRandom]}">` + '<div>' + cardValue[cardValueRandom] + ' ' + cardSymbols[cardSuitsRandom] + '</div></div>' }; window.onload = () => { document.querySelector('#cardMap').innerHTML = GenerateRandomCard(); }
body { background-color: green } #cardMap { display: flex; flex-direction: row; flex-wrap: wrap; margin: 80px auto 10px auto; height: 420px; width: 360px; background-color: white; border-radius: 5px; } #cardMap > div { width: 100%; padding: 1rem; }.allCard { font-size: 16px; }.heartCard { background-color: #eee; }.spadeCard { background-color: #ccc; }.diamondCard { background-color: #aaa; }.clubCard { background-color: #888; }
<div id="cardMap" class="allCard"></div>
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.