CODEWITHSUNDEEP
javascripthtml
Ali Sherifov
Ali Sherifov

Reputation: 25

Logical "and" and logical "or" don't work

I am creating rock, paper, scissors game and I have to check which player wins but there is a problem in the second if statement. Some elements are set to display: none but I don't think that has anything to do with the JS code. I know it has something to do with the logical operators. May someone explain what did I do wrong, please?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <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>RPS</title>
</head>
<body>
    <div class="phase-1">
        <img class="all-elements" src="../img/all.jpg" alt="">
        <button class="start">start</button>
        <ul class="rules">
            <h1>RULES</h1>
            <li>Rock beats scissors</li>
            <li>Scissors beat paper</li>
            <li>Paper beats rock</li>
        </ul>
    </div>
    <div class="phase-2">
        <div class="opponent">
            <img src="" alt="" class="opponent-choise">
        </div>
        <div class="result"></div>
        <div class="wrapper">
            <img src="../img/rock.png" class="rock" alt="">
            <img src="../img/paper.png" class="paper" alt="">
            <img src="../img/scissors.png" class="scissors" alt="">
        </div>
    </div>
</body>
<script src="app.js"></script>
</html>

JS:

let elements = [
    "../img/scissors.png",
    "../img/rock.png",
    "../img/paper.png",
];
const startBtn = document.querySelector('.start')
const startImg = document.querySelector('.all-elements')
const rules = document.querySelector('.rules')
const phase1 = document.querySelector('.phase-1')
const phase2 = document.querySelector('.phase-2')
const imgs = document.querySelectorAll('.wrapper img')
const opponent = document.querySelector('.opponent-choise')


startBtn.addEventListener('click', ()=>{
    phase1.style.display = "none"
    phase2.style.display = "block"
})

for(let i = 0; i < imgs.length; i++){
    let me = imgs[i]
    me.addEventListener('click', ()=>{
        imgs.forEach((a)=>{
            a.style.display = "none"
        })
        me.style.display = "block"
        displayOpponent()
        checkForWinner(me, opponent)
    })
}

function displayOpponent(){
    let random = Math.floor(Math.random() * 3)
    opponent.style.display = "block"
    opponent.src = elements[random]
}

function checkForWinner(me, opponent){
    if(me.src == opponent.src){
        console.log('draw')
    } else if(
        me.src == elements[0] && opponent.src == elements[2] ||
        me.src == elements[1] && opponent.src == elements[0] ||
        me.src == elements[2] && opponent.src == elements[1] 
        ){
        console.log('win')
    } else {
        console.log('lose')
    }
}

Upvotes: 1

Views: 196

Answers (2)

Micko Magallanes
Micko Magallanes

Reputation: 270

.src property will return your actual file source like file:///home/user/Documents/rockpaper/rock.png

So what you have to do is this:

 function checkForWinner(me, opponent) {
        let meSrc = me.getAttribute("src");
        let opponenentSrc = opponent.getAttribute("src");

        if (meSrc == opponenentSrc) {
            console.log('draw')
        } else if (
            meSrc == elements[0] && opponenentSrc == elements[2] ||
            meSrc == elements[1] && opponenentSrc == elements[0] ||
            meSrc == elements[2] && opponenentSrc == elements[1]
        ) {
            console.log('win')
        } else {
            console.log('lose')
        }
    }

Upvotes: 1

Siva Chandran
Siva Chandran

Reputation: 99

You have to group conditions using round brackets. when using a mix of both and or operators

function checkForWinner(me, opponent){
    if(me.src == opponent.src){
        console.log('draw')
    } else if(
        ( me.src == elements[0] && opponent.src == elements[2] ) ||
        ( me.src == elements[1] && opponent.src == elements[0] ) ||
        ( me.src == elements[2] && opponent.src == elements[1] )
        ){
        console.log('win')
    } else {
        console.log('lose')
    }
}

Upvotes: 0

Related Questions