I have tried to implement a function to show the values of the player and the dealer cards (pelaajan pisteet and jakajan pisteet) But I have only been able to print the value of the players first two cards. I have tried it simply just printing the value of “KorttiSumma” and “KorttiSumma2” but it didn’t work exactly as I planed, as I said Printing the “KorttiSumma” printed the players first two cards but printing the “KorttiSumma2” didn’t print the dealers cards, It didn’t print anything. I’d appreciate if someone could help me I am losing my mind (sorry for the bad english).
let korttiPakka = [];
let maat = "";
for (let i = 0; i < 4; i++){
if (i == 0) {
maat = "hearts";
}
else if (i == 1) {
maat = "clubs";
}
else if (i == 2) {
maat = "diamonds";
}
else if (i == 3) {
maat = "spades"
}
for (let j = 0; j < 13; j++) {
korttiPakka.push([maat, j + 1]);
}
}
korttiPakka = korttiPakka.sort(function(a, b){return 0.5 - Math.random()});
let laskuri = 0;
let korttiArvo = korttiPakka[laskuri][1];
let korttiMaaKoodi = korttiPakka[laskuri][0];
let korttiSumma = 0;
while (laskuri < 2) {
if (laskuri == 0) {
document.getElementById("upper").innerText = korttiArvo;
if (korttiMaaKoodi == "hearts") {
document.getElementById("midle-red").innerText = "♥";
}
else if (korttiMaaKoodi == "clubs") {
document.getElementById("midle").innerText = "♣";
}
else if (korttiMaaKoodi == "diamonds") {
document.getElementById("midle-red").innerText = "♦";
}
else if (korttiMaaKoodi == "spades") {
document.getElementById("midle").innerText = "♠";
}
document.getElementById("lower").innerText = korttiArvo;
korttiSumma += korttiArvo;
laskuri++;
korttiMaaKoodi = korttiPakka[laskuri][0];
korttiArvo = korttiPakka[laskuri][1];
}
else if (laskuri == 1) {
document.getElementById("upper2").innerText = korttiArvo;
if (korttiMaaKoodi == "hearts") {
document.getElementById("midle-red2").innerText = "♥";
}
else if (korttiMaaKoodi == "clubs") {
document.getElementById("midle2").innerText = "♣";
}
else if (korttiMaaKoodi == "diamonds") {
document.getElementById("midle-red2").innerText = "♦";
}
else if (korttiMaaKoodi == "spades") {
document.getElementById("midle2").innerText = "♠";
}
document.getElementById("lower2").innerText = korttiArvo;
korttiSumma += korttiArvo;
laskuri++;
}
}
if (korttiSumma == 21) {
document.getElementById("tulos").innerText = "Sait korttien arvoksi 21, VOITIT PELIN!";
}
else if (korttiSumma > 21) {
document.getElementById("tulos").innerText = "HÄVISIT PELIN!";
}
function nostaKortti() {
korttiMaaKoodi = korttiPakka[laskuri][0];
korttiArvo = korttiPakka[laskuri][1];
korttiSumma += korttiArvo;
if (laskuri == 2) {
document.getElementById("upper3").innerText = korttiArvo;
if (korttiMaaKoodi == "hearts") {
document.getElementById("midle-red3").innerText = "♥";
}
else if (korttiMaaKoodi == "clubs") {
document.getElementById("midle3").innerText = "♣";
}
else if (korttiMaaKoodi == "diamonds") {
document.getElementById("midle-red3").innerText = "♦";
}
else if (korttiMaaKoodi == "spades") {
document.getElementById("midle3").innerText = "♠";
}
document.getElementById("lower3").innerText = korttiArvo;
if (korttiSumma == 21) {
document.getElementById("tulos").innerText = "VOITIT PELIN!";
}
else if (korttiSumma > 21) {
document.getElementById("tulos").innerText = "Jakaja voitti, HÄVISIT PELIN!";
}
else {
laskuri++;
}
}
else if (laskuri == 3) {
document.getElementById("upper4").innerText = korttiArvo;
if (korttiMaaKoodi == "hearts") {
document.getElementById("midle-red4").innerText = "♥";
}
else if (korttiMaaKoodi == "clubs") {
document.getElementById("midle4").innerText = "♣";
}
else if (korttiMaaKoodi == "diamonds") {
document.getElementById("midle-red4").innerText = "♦";
}
else if (korttiMaaKoodi == "spades") {
document.getElementById("midle4").innerText = "♠";
}
document.getElementById("lower4").innerText = korttiArvo;
if (korttiSumma == 21) {
document.getElementById("tulos").innerText = "VOITIT PELIN!";
}
else if (korttiSumma > 21) {
document.getElementById("tulos").innerText = "Jakaja voitti, HÄVISIT PELIN!";
}
else {
laskuri++;
}
}
else if (laskuri == 4) {
document.getElementById("upper5").innerText = korttiArvo;
if (korttiMaaKoodi == "hearts") {
document.getElementById("midle-red5").innerText = "♥";
}
else if (korttiMaaKoodi == "clubs") {
document.getElementById("midle5").innerText = "♣";
}
else if (korttiMaaKoodi == "diamonds") {
document.getElementById("midle-red5").innerText = "♦";
}
else if (korttiMaaKoodi == "spades") {
document.getElementById("midle5").innerText = "♠";
}
document.getElementById("lower5").innerText = korttiArvo;
if (korttiSumma == 21 || korttiSumma < 21) {
document.getElementById("tulos").innerText = "VOITIT PELIN!";
}
else if (korttiSumma > 21) {
document.getElementById("tulos").innerText = "Jakaja voitti, HÄVISIT PELIN!";
}
else {
laskuri++;
}
}
}
function jää() {
korttiArvo = korttiPakka[laskuri][1];
korttiMaaKoodi = korttiPakka[laskuri][0];
let korttiSumma2 = korttiArvo;
let loppu = 0;
document.getElementById("upper6").innerText = korttiArvo;
if (korttiMaaKoodi == "hearts") {
document.getElementById("midle-red6").innerText = "♥";
}
else if (korttiMaaKoodi == "clubs") {
document.getElementById("midle6").innerText = "♣";
}
else if (korttiMaaKoodi == "diamonds") {
document.getElementById("midle-red6").innerText = "♦";
}
else if (korttiMaaKoodi == "spades") {
document.getElementById("midle6").innerText = "♠";
}
document.getElementById("lower6").innerText = korttiArvo;
if (korttiSumma2 > 21) {
document.getElementById("tulos").innerText = "Voitit pelin!";
loppu += 1;
}
else if ((korttiSumma2 > korttiSumma && korttiSumma2 < 21) || korttiSumma2 == 21) {
document.getElementById("tulos").innerText = "Jakaja voitti pelin!";
loppu += 1;
}
else if (korttiSumma2 < 21 && loppu == 0) {
laskuri++;
korttiArvo = korttiPakka[laskuri][1];
korttiMaaKoodi = korttiPakka[laskuri][0];
korttiSumma2 += korttiArvo;
document.getElementById("upper7").innerText = korttiArvo;
if (korttiMaaKoodi == "hearts") {
document.getElementById("midle-red7").innerText = "♥";
}
else if (korttiMaaKoodi == "clubs") {
document.getElementById("midle7").innerText = "♣";
}
else if (korttiMaaKoodi == "diamonds") {
document.getElementById("midle-red7").innerText = "♦";
}
else if (korttiMaaKoodi == "spades") {
document.getElementById("midle7").innerText = "♠";
}
document.getElementById("lower7").innerText = korttiArvo;
if (korttiSumma2 > 21) {
document.getElementById("tulos").innerText = "Voitit pelin!";
loppu += 1;
}
else if ((korttiSumma2 > korttiSumma && korttiSumma2 < 21) || korttiSumma2 == 21) {
document.getElementById("tulos").innerText = "Jakaja voitti pelin!";
loppu += 1;
}
else if (korttiSumma2 < 21 && loppu == 0) {
laskuri++;
korttiArvo = korttiPakka[laskuri][1];
korttiMaaKoodi = korttiPakka[laskuri][0];
korttiSumma2 += korttiArvo;
document.getElementById("upper8").innerText = korttiArvo;
if (korttiMaaKoodi == "hearts") {
document.getElementById("midle-red8").innerText = "♥";
}
else if (korttiMaaKoodi == "clubs") {
document.getElementById("midle8").innerText = "♣";
}
else if (korttiMaaKoodi == "diamonds") {
document.getElementById("midle-red8").innerText = "♦";
}
else if (korttiMaaKoodi == "spades") {
document.getElementById("midle8").innerText = "♠";
}
document.getElementById("lower8").innerText = korttiArvo;
if (korttiSumma2 > 21) {
document.getElementById("tulos").innerText = "Voitit pelin!";
loppu += 1;
}
else if ((korttiSumma2 > korttiSumma && korttiSumma2 < 21) || korttiSumma2 == 21) {
document.getElementById("tulos").innerText = "Jakaja voitti pelin!";
loppu += 1;
}
else if (korttiSumma < 21 && loppu == 0) {
laskuri++;
korttiArvo = korttiPakka[laskuri][1];
korttiMaaKoodi = korttiPakka[laskuri][0];
korttiSumma2 += korttiArvo;
document.getElementById("upper9").innerText = korttiArvo;
if (korttiMaaKoodi == "hearts") {
document.getElementById("midle-red9").innerText = "♥";
}
else if (korttiMaaKoodi == "clubs") {
document.getElementById("midle9").innerText = "♣";
}
else if (korttiMaaKoodi == "diamonds") {
document.getElementById("midle-red9").innerText = "♦";
}
else if (korttiMaaKoodi == "spades") {
document.getElementById("midle9").innerText = "♠";
}
document.getElementById("lower9").innerText = korttiArvo;
if (korttiSumma2 > 21) {
document.getElementById("tulos").innerText = "Voitit pelin!";
loppu += 1;
}
else if ((korttiSumma2 > korttiSumma && korttiSumma2 < 21) || korttiSumma2 == 21) {
document.getElementById("tulos").innerText = "Jakaja voitti pelin!";
loppu += 1;
}
else if (korttiSumma2 < 21 && loppu == 0) {
laskuri++;
korttiArvo = korttiPakka[laskuri][1];
korttiMaaKoodi = korttiPakka[laskuri][0];
korttiSumma2 += korttiArvo;
document.getElementById("upper10").innerText = korttiArvo;
if (korttiMaaKoodi == "hearts") {
document.getElementById("midle-red10").innerText = "♥";
}
else if (korttiMaaKoodi == "clubs") {
document.getElementById("midle10").innerText = "♣";
}
else if (korttiMaaKoodi == "diamonds") {
document.getElementById("midle-red10").innerText = "♦";
}
else if (korttiMaaKoodi == "spades") {
document.getElementById("midle10").innerText = "♠";
}
document.getElementById("lower10").innerText = korttiArvo;
if (korttiSumma2 > 21) {
document.getElementById("tulos").innerText = "Voitit pelin";
}
else if (korttiSumma2 < 21) {
document.getElementById("tulos").innerText = "Jakaja voitti pelin!";
}
}
}
}
}
}
* {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
color: white;
}
span { display: block; }
.outline{ width: 110px; text-align: center; padding: 10px; margin: 10px; background: #FFF; color: #cc0033;
}
.top{ text-align: left; }
.bottom{ text-align: right; }
.shadow{ box-shadow: 1px 1px 3px #000; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; }
.rounded{ border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }
.main {
margin-top: 10rem;
background-color: #212121;
color: #98ffa5c9;
}
body {
background-color: #212121;
font-family:Verdana, Geneva, Tahoma, sans-serif;
margin: 0;
padding: 0;
}
/* Navin säännöt */
.laatikko {
max-width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
color: rgb(225, 225, 225);
}
header nav ul li a:hover {
background-color: #4B0082;
padding: 0.2rem;
}
.navi {
background-color: #1d1c1c;
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
header nav ul {
list-style-type: none;
}
header nav ul li {
display: inline-block;
padding: 0 1rem;
}
header nav ul li a,
.logo a {
text-decoration: none;
display: block;
}
.logo a {
font-size: 2rem;
color: #4B0082;
}
header .laatikko {
position: relative;
padding: 1rem;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.kuva-otsikko {
text-align: inherit;
font-size: 3rem;
}
/* kuvan säännöt */
.tausta-kuva {
position: relative;
margin-top: 45px;
}
.kuva-otsikko {
position: absolute;
top: 200px;
left: 50px;
}
.kuva-kappale {
position: absolute;
top: 300px;
left: 50px;
font-size: 1.2rem;
}
.kuva {
padding-top: 1.5rem;
filter: opacity(100%);
filter: brightness(20%);
}
.tiedot {
padding-top: 5rem;
text-align: center;
}
.tiedot2 {
text-align: center;
}
#tulos {
text-align: center;
font-family:fantasy;
color: #98ffa5c9;
font-size: 60px;
}
/* Napit otettu sivustolta: https://getcssscan.com/css-buttons-examples */
.button-71 {
background-color: #98ffa5c9;
border: 0;
border-radius: 56px;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
font-size: 18px;
font-weight: 600;
outline: 0;
padding: 16px 21px;
position: relative;
text-align: center;
text-decoration: none;
transition: all .3s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-71:before {
background-color: initial;
border-radius: 125px;
content: "";
height: 50%;
left: 4%;
opacity: .5;
position: absolute;
top: 0;
transition: all .3s;
width: 92%;
}
.button-71:hover {
background-color: #1e8449;;
box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
transform: scale(1.05);
}
@media (min-width: 768px) {
.button-71 {
padding: 16px 48px;
}
}
.button-68 {
appearance: none;
backface-visibility: hidden;
background-color: #98ffa5c9;
border-radius: 8px;
border-style: none;
box-shadow: rgba(39, 174, 96, .15) 0 4px 9px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: normal;
line-height: 1.5;
outline: none;
overflow: hidden;
padding: 13px 20px;
position: relative;
text-align: center;
text-decoration: none;
transform: translate3d(0, 0, 0);
transition: all .3s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: top;
white-space: nowrap;
margin: 2rem;
}
.button-68:hover {
background-color: #1e8449;
opacity: 1;
transform: translateY(0);
transition-duration: .35s;
}
.button-68:active {
transform: translateY(2px);
transition-duration: .35s;
}
.button-68:hover {
box-shadow: rgba(39, 174, 96, .2) 0 6px 12px;
}
#kortti1, #kortti2, #kortti3, #kortti4, #kortti5, #kortti6, #kortti7, #kortti8, #kortti9, #kortti10 {
background-color: white;
width: 110px;
height: 210px;
border: 1px solid #ccc;
padding: 50px;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
margin: 20px;
padding: 2rem 2rem 2rem 2rem;
user-select: none;
display: inline-block;
}
#upper, #upper2, #upper3, #upper4, #upper5, #upper6, #upper7, #upper8, #upper9, #upper10 {
top: 10px;
left: 30px;
margin: 0;
padding: 0;
border: 0;
font-size: 40px;
color: black;
margin-left: -100px;
}
#midle, #midle2, #midle3, #midle4, #midle5, #midle6, #midle7, #midle8, #midle9, #midle10 {
text-align: left;
margin: 35px;
font-size: 60px;
color: black;
}
#midle-red, #midle-red2, #midle-red3, #midle-red4, #midle-red5, #midle-red6, #midle-red7, #midle-red8, #midle-red9, #midle-red10 {
text-align: left;
margin: 35px;
font-size: 60px;
color: red;
}
#lower, #lower2, #lower3, #lower4, #lower5, #lower6, #lower7, #lower8, #lower9, #lower10 {
transform: rotate(180deg);
margin-left: 130px;
font-size: 40px;
color: black;
}
.peli {
justify-content: center;
text-align: center;
}
.jakaja-otsikko {
margin-left: -56rem;
}
.pelaaja-otsikko {
margin-left: -56rem;
}
.otsikko1 {
margin-top: -5.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oma nettisivu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="navi">
<div class="laatikko">
<div class="logo"><a href="https://public.bc.fi/s2101004/ohjelmointi/">Kasperin JavaScript-ohjelmia</a></div>
<nav>
<ul>
<li><a href="https://public.bc.fi/s2101004/ohjelmointi/teht/">Tehtävät</a></li>
<li><a href="https://public.bc.fi/s2101004/ohjelmointi/robotto/">Robotto-ohjelma</a></li>
<li><a href="https://public.bc.fi/s2101004/ohjelmointi/ventti/">Ventti-ohjelma</a></li>
<li><a href="https://public.bc.fi/s2101004/ohjelmointi/luvut/">Luvut-ohjelma</a></li>
<li><a href="#footer">Yhteystiedot</a></li>
</ul>
</nav>
</div>
</div>
<div class="main">
<h1 class="otsikko1">TÄSSÄ ON VENTTI OHJELMA</h1>
<h3 class="otsikko2">Tässä tehtävässä piti: Tee JavaScript-ohjelma, joka toteuttaa ventti korttipelin</h3>
<br>
<div class="peli">
<h2 class="jakaja-otsikko">Jakajan kortit</h2>
<div id="jp" class="jp">Jakajan Pisteet:</div>
<div id="jakajankortit">
<div id="kortti6">
<p id="upper6"></p>
<p id="midle6"></p>
<p id="midle-red6"></p>
<p id="lower6"></p>
</div>
<div id="kortti7">
<p id="upper7"></p>
<p id="midle7"></p>
<p id="midle-red7"></p>
<p id="lower7"></p>
</div>
<div id="kortti8">
<p id="upper8"></p>
<p id="midle8"></p>
<p id="midle-red8"></p>
<p id="lower8"></p>
</div>
<div id="kortti9">
<p id="upper9"></p>
<p id="midle9"></p>
<p id="midle-red9"></p>
<p id="lower9"></p>
</div>
<div id="kortti10">
<p id="upper10"></p>
<p id="midle10"></p>
<p id="midle-red10"></p>
<p id="lower10"></p>
</div>
</div>
<br>
<br>
<h2 class="pelaaja-otsikko">Pelaajan kortit</h2>
<div id="pp" class="pp">Pelaajan Pisteet:</div>
<div id="pelaajankortit">
<div id="kortti1">
<p id="upper"></p>
<p id="midle"></p>
<p id="midle-red"></p>
<p id="lower"></p>
</div>
<div id="kortti2">
<p id="upper2"></p>
<p id="midle2"></p>
<p id="midle-red2"></p>
<p id="lower2"></p>
</div>
<div id="kortti3">
<p id="upper3"></p>
<p id="midle3"></p>
<p id="midle-red3"></p>
<p id="lower3"></p>
</div>
<div id="kortti4">
<p id="upper4"></p>
<p id="midle4"></p>
<p id="midle-red4"></p>
<p id="lower4"></p>
</div>
<div id="kortti5">
<p id="upper5"></p>
<p id="midle5"></p>
<p id="midle-red5"></p>
<p id="lower5"></p>
</div>
</div>
<button type="button" class="button-68" role="button" onclick="nostaKortti()">Nosta!</button>
<button type="button" class="button-68" role="button" onclick="jää()">Jää!</button>
<p id="tulos"></p>
<br>
<button type="button" class="button-71" role="button" onclick="history.go(0);">Uusi Peli!</button>
</div>
<script src="skriptit.js"></script>
</body>