I have made 3 buttons (10 $, 20 $ ,50$)
and i want when someone clicks a button to add the previous value.
But i get something like this when i click on my buttons 1020502010
Something im doing wrong in this part of the code
// function betBtn()
function bet10 () {
chipbeted.textContent += betc.bet10
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
function bet20 () {
chipbeted.textContent += betc.bet20
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
function bet50 (){
chipbeted.textContent += betc.bet50
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
let player = {
Name : "Nik",
Chips: 150
}
let cards = []
let sum = 0
let hasBlackjack = false
let isAlive = false
let betOn = false
let betc ={
bet10 : 10,
bet20 : 20,
bet50 : 50
}
let message = ""
let messageEl = document.getElementById("message-el")
let totalBet = document.getElementById("chipCount").textContent
let sumEl = document.querySelector("#sum-el")
let cardsEl = document.getElementById("cards-el")
let chipbeted = document.getElementById("chipCount")
let playerEl = document.getElementById("playerEl")
playerEl.textContent = player.Name +":" +" " + player.Chips + "$"
console.log(cards)
function getRandomCard () {
let randomNumer = Math.floor( Math.random()*13 ) + 1
if (randomNumer > 10) {
return 10
} else if (randomNumer === 1) {
return 11
} else {
return randomNumer
}
}
let randomCard = getRandomCard()
function startGame (){
if (betOn === true){
isAlive = true
let firstCard = getRandomCard()
let secondCard = getRandomCard()
cards = [firstCard, secondCard]
sum = firstCard + secondCard
$('.class').css('visibility', 'hidden');
}
else if (betOn === false){
document.getElementById("messagewl").textContent = "First, select how many chips you want to BET"
sum= ""
}
renderGame()
}
function renderGame(){
cardsEl.textContent = "Cards: "
for ( let i=0; i<cards.length ; i++){
cardsEl.textContent += cards[i] + " "
}
sumEl.textContent = "Sum: " + sum
if ( sum <= 20) {
console.log(sum)
message = "Do you want to draw a new card? "
}
else if ( sum === 21){
console.log(sum)
message = "You've got Blackjack!"
hasBlackjack = true
}
else {
console.log(sum)
message = "You're out of the game!"
isAlive = false
}
messageEl.textContent = message
sumEl.textContent = "Sum: " + sum
}
function cardNew(){
if (isAlive === true && hasBlackjack === false) {
let card = getRandomCard()
sum += card
cards.push(card)
console.log(cards)
renderGame()
}
}
// function betBtn()
function bet10 () {
chipbeted.textContent += betc.bet10
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
function bet20 () {
chipbeted.textContent += betc.bet20
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
function bet50 (){
chipbeted.textContent += betc.bet50
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}html, body{
background-image: url("space.png");
background-size: cover;
background-attachment: fixed;
}
body {
color: aliceblue;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
text-align: center;
margin-top: 30px;
}
#h1 {
text-align: center;
}
h1 {
font-size: 4em;
display: inline-block;
background: linear-gradient(246.26deg, #ED4683 0%, #F48E14 100%);
border-radius: 100px;
border: 30px;
padding: 0 10px;
text-align: center;
}
#buttons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
p{
font-size: 2em;
}
#btn {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background: linear-gradient(246.26deg, #ED4683 0%, #F48E14 100%);
width:250px;
font-size: 2.5em;
color: aliceblue;
}
#btnBet > #btn10,#btn20,#btn50{
margin-top: 20px;
font-size: 30px;
font-weight: bold;
justify-content: center;
margin: 20 15 0 15;
}<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>blackjac Game</title>
</head>
<body>
<div class="h1">
<h1>Space Blackjack</h1>
</div>
<p id="message-el">Want to play a round?</p>
<p id="cards-el">Cards:</p>
<p id="sum-el">Sum:</p>
<p class= "class" id="messagewl"></p>
<div id="buttons">
<button id="btn" onclick="startGame()">Start Game</button>
<button id="btn" onclick="cardNew()">Draw Card</button>
<button id="btn" onclick="bet()">Bet Chips</button>
</div>
<div id="btnBet">
<button id="btn10" onclick="bet10()">10$</button>
<button id="btn20" onclick="bet20()">20$</button>
<button id="btn50" onclick="bet50()">50$</button>
</div>
<p id="chipCount"></p>
<p id="playerEl"></p>
<script src="index.js"></script>
</body>
>Solution :
This is happening because the variable chipbeted.textContent returns a string .. that’s why you get concatenated result (for example: ’20’+10 = 2010 not 30
)..
to solve this problem,
let chipbeted = document.getElementById("chipCount")
let betc = {
bet10: 10,
bet20: 20,
bet50: 50
}
function bet20() {
chipbeted.textContent = Number(chipbeted.textContent) + betc.bet20
//betOn = true
//$('.class').css('visibility', 'hidden');
//console.log(chipbeted.textContent)
}<button onClick="bet20()">Add bet20</button>
<p id="chipCount"></p>replace
chipbeted.textContent += betc.bet20
in your functions
with
chipbeted.textContent = Number(chipbeted.textContent) + betc.bet20