Всем здравствуйте, столкнулся с ошибкой при создании игры в 21.
Добавил див и добавил к нему addEventListener, но когда нажимаю на body или другой блок, то вызывается событие которое на диве. В чём проблема не знаю, как сделать так чтобы при нажатии только на див обработчик начинал работать. Добавлял также к диву event.stoppropagation() не помогло.
Мой код:
Js:
//Make a function
function CardGame() {
//Define variables
this.cardDeck = 36;
this.cardNumbers = [];
this.cardBack = null;
this.getCard = null;
this.passButton = null;
this.myScore = null;
this.opponentScore = null;
this.opponentCards = null;
var myHand = 0;
var opponentHand = 0;
///Start function
this.start = function () {
//Write in array amount of cards from 1 to 36
for (var i = 1; i < this.cardDeck; i++) {
var x = this.cardNumbers.push(Math.floor(Math.random() * this.cardDeck));
x = this.cardNumbers[i]
};
console.log(this.cardNumbers);
//call function and transfer values
uniq_fast(this.cardNumbers);
//function which mix a values of arr in different order
function uniq_fast(a) {
var seen = {};
var out = [];
var len = a.length;
var j = 1;
for (var i = 1; i < len; i++) {
var item = a[i];
if (seen[item] !== 1) {
seen[item] = 1;
out[j++] = item;
}
if (out.length < 36) {
out.push(Math.floor(Math.random() * 36));
}
}
for(var x=1;x<out.length;x++){
var wrapper = document.getElementById('wrapper');
wrapper.innerHTML = wrapper.innerHTML + '<div id = '+ out[x] +' class=no-card ><img src=./img/back-size-of-card.jpg /></div>'
}
}
//add listeners to their selectors
this.cardBack = document.querySelector('.no-card');
console.log(this.cardBack);
this.cardBack = addEventListener('click',function (e){
e.stopPropagation()
onCardClick();
});
this.passButton = document.querySelector('#pass-card-button');
this.passButton.addEventListener('click', function(e){
onPassClick();
})
};
//function when user click on deck and cards are turn around
function onCardClick(event){
this.myScore = document.getElementById('my-score');
this.getCard = document.getElementsByClassName('no-card');
var cardId = this.getCard[this.getCard.length-1].id;
this.getCard[this.getCard.length-1].innerHTML = '<img src = ./img/'+cardId+'.jpg />'
this.getCard[this.getCard.length-1].className = 'my-card';
var number = orderCardIds(cardId);
myHand = myHand+number;
this.myScore.innerHTML = myHand;
if(myHand==21){
alert('You are real Black Jack :)');
}else if(myHand > 21){
alert('You lose? you have above 21 :(');
}
};
//function when user click on pass and opponent make a move
function onPassClick(){
this.opponentScore = document.getElementById('opponent-score');
this.getCard = document.getElementsByClassName('no-card');
var cardId = this.getCard[this.getCard.length-1].id;
this.getCard[this.getCard.length-1].innerHTML = '<img src = ./img/'+cardId+'.jpg />'
this.getCard[this.getCard.length-1].className = 'opponent-card';
var number = orderCardIds(cardId);
opponentHand = opponentHand+number;
this.opponentScore.innerHTML = opponentHand;
if(opponentHand==21){
alert('You have beaten');
}else if(opponentHand > 21){
alert('You are real Monster');
}
};
//function that returns cardId for another functions
function orderCardIds(cardId){
if(cardId == '1'||cardId == '2' ||cardId == '3' || cardId == '4'){
cardId = 6;
}else if(cardId == '5' ||cardId == '6' ||cardId == '7' || cardId == '8'){
cardId =7;
}else if(cardId == '9' ||cardId == '10' ||cardId == '11' || cardId == '12'){
cardId = 8;
}else if(cardId == '13' ||cardId == '14' ||cardId == '15' || cardId == '16'){
cardId = 9;
}else if(cardId == '17' ||cardId == '18' ||cardId == '19' || cardId == '20'){
cardId = 10;
}else if(cardId == '21'||cardId == '22' ||cardId == '23' || cardId == '24'){
cardId = 2;
}else if(cardId == '25'||cardId == '26'||cardId == '27' || cardId == '28'){
cardId =3;
}else if(cardId == '29' ||cardId == '30' ||cardId == '31' || cardId == '32'){
cardId = 4;
}else if(cardId == '33' ||cardId == '34' ||cardId == '35' || cardId == '36' ){
cardId = 11;
}
return cardId;
}
}
var cardGame1 = new CardGame();
cardGame1.start();
HTML:
<div class="wrapper" id="wrapper">
<span id="opponent-score">0</span>
<span id="my-score">0</span>
<button id="pass-card-button" class="pass-card-button">Pass</button>
</div>
Помогите пожалуйста