innerHTML error

Asked

Viewed 37 times

0

Good afternoon, I’m making a game of stone, paper and scissors, and I came across this mistake, I can’t find solution... x.x

/* Para começar, vamos atribuir algumas constantes de pegar os elementos pelo ID e class */


let userScore = 0;
let computerScore = 0;
const userScore_ponto = document.getElementById("usuarioponto");
const computerScore_ponto = document.getElementById("computadorponto");
const scoreBoard_div = document.querySelector("pontuacao");
const result_div = document.querySelector("result p");
const pedra_div = document.getElementById("r");
const papel_div = document.getElementById("p");
const tesoura_div = document.getElementById("s");





/* Avisos para quando abrir a página */
/*
alert("Olá!");
alert("Esse é um jogo em que você testa a sua sorte!");
alert("Você vai escolher entre pedra, papel e tesoura e o PC irá escolher outro");
alert("A máquina não foi programada para saber antecipado qual você escolheu.");
alert("Que a sorte esteja com você ^^");
*/


/* Vamos começar a programar de fato */

function getComputerChoice() {
    const choices = ["r", "p", "s"];
    const randomNum = (Math.floor(Math.random() * 3));
    return choices[randomNum];

}

//console.log(getComputerChoice());


function win(userChoice, computerChoice) {

    console.log(userChoice);
    console.log(computerChoice);

    userScore++;
    userScore_ponto.innerHTML = userScore;
    result_div.innerHTML = userChoice;

}
function lose(userChoice, computerChoice) {
    computerScore++;
    computerScore_ponto.innerHTML = computerScore;

}
function draw(userChoice, computerChoice) {
    console.log("DRAW");
}


function game(userChoice) {
    const computerChoice = getComputerChoice();


    /* Um monte de Switch para validar a vitória */



    switch (userChoice + computerChoice) {
        case "rs":
        case "pr":
        case "sp":
            win(userChoice, computerChoice);
            break;
        case "rp":
        case "ps":
        case "sr":
            lose(userChoice, computerChoice);
            break;
        case "rr":
        case "pp":
        case "ss":
            draw(userChoice, computerChoice);
            break;

    }










}



game();




function main() {

    pedra_div.addEventListener('click', function () {
        game("r");

    });

    papel_div.addEventListener('click', function () {
        game("p");

    });

    tesoura_div.addEventListener('click', function () {
        game("s");






    });
}

main();
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Jokenpô</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css" />


</head>

<body>

    <header>
        <h1>Jokenpô</h1>
    </header>



    <div class="pontuacao">
        <div id="telavoce" class="badge">
            <h1 id="you">You</h1>
        </div>
        <div id="telamaquina" class="badge">
            <h1 id="pc">PC</h1>
        </div>

        <span id="usuarioponto" class="pontos">0</span>
        <span class="pontos">:</span>
        <span id="computadorponto" class="pontos">0</span>



    </div>

    <div>
        <p class="result">Pedra ganha de tesoura que ganha de papel que ganha de pedra.</p>
    </div>

    <div class="escolhas">
        <div id="r" class="escolha"><img src="pedra.png"></div>
        <div id="p" class="escolha"><img src="papel.png"></div>
        <div id="s" class="escolha"><img src="tesoura.png"></div>

    </div>

    <h1 id="suaescolha">Faça a sua escolha</h1>


</body>

<script src="script.js"></script>

</html>

javascript html css

1 answer

1


The mistake is here 

/// retorna null, pq nao existe elemento <pontuacao></pontuacao>
const scoreBoard_div = document.querySelector("pontuacao"); 

/// retorna null, pq nao existe elemento <result><p></p></result>
const result_div = document.querySelector("result p");

should be 

/// voce quer class='pontuacao'
const scoreBoard_div = document.querySelector(".pontuacao");
/// voce quer <p class='result'>
const result_div = document.querySelector("p.result");


/* Para começar, vamos atribuir algumas constantes de pegar os elementos pelo ID e class */


let userScore = 0;
let computerScore = 0;
const userScore_ponto = document.getElementById("usuarioponto");
const computerScore_ponto = document.getElementById("computadorponto");
const scoreBoard_div = document.querySelector(".pontuacao");
const result_div = document.querySelector("p.result");
const pedra_div = document.getElementById("r");
const papel_div = document.getElementById("p");
const tesoura_div = document.getElementById("s");





/* Avisos para quando abrir a página */
/*
alert("Olá!");
alert("Esse é um jogo em que você testa a sua sorte!");
alert("Você vai escolher entre pedra, papel e tesoura e o PC irá escolher outro");
alert("A máquina não foi programada para saber antecipado qual você escolheu.");
alert("Que a sorte esteja com você ^^");
*/


/* Vamos começar a programar de fato */

function getComputerChoice() {
    const choices = ["r", "p", "s"];
    const randomNum = (Math.floor(Math.random() * 3));
    return choices[randomNum];

}

//console.log(getComputerChoice());


function win(userChoice, computerChoice) {

    console.log(userChoice);
    console.log(computerChoice);

    userScore++;
    userScore_ponto.innerHTML = userScore;
    result_div.innerHTML = userChoice;

}
function lose(userChoice, computerChoice) {
    computerScore++;
    computerScore_ponto.innerHTML = computerScore;

}
function draw(userChoice, computerChoice) {
    console.log("DRAW");
}


function game(userChoice) {
    const computerChoice = getComputerChoice();


    /* Um monte de Switch para validar a vitória */



    switch (userChoice + computerChoice) {
        case "rs":
        case "pr":
        case "sp":
            win(userChoice, computerChoice);
            break;
        case "rp":
        case "ps":
        case "sr":
            lose(userChoice, computerChoice);
            break;
        case "rr":
        case "pp":
        case "ss":
            draw(userChoice, computerChoice);
            break;

    }










}



game();




function main() {

    pedra_div.addEventListener('click', function () {
        game("r");

    });

    papel_div.addEventListener('click', function () {
        game("p");

    });

    tesoura_div.addEventListener('click', function () {
        game("s");






    });
}

main();
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Jokenpô</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css" />


</head>

<body>

    <header>
        <h1>Jokenpô</h1>
    </header>



    <div class="pontuacao">
        <div id="telavoce" class="badge">
            <h1 id="you">You</h1>
        </div>
        <div id="telamaquina" class="badge">
            <h1 id="pc">PC</h1>
        </div>

        <span id="usuarioponto" class="pontos">0</span>
        <span class="pontos">:</span>
        <span id="computadorponto" class="pontos">0</span>



    </div>

    <div>
        <p class="result">Pedra ganha de tesoura que ganha de papel que ganha de pedra.</p>
    </div>

    <div class="escolhas">
        <div id="r" class="escolha"><img src="pedra.png"></div>
        <div id="p" class="escolha"><img src="papel.png"></div>
        <div id="s" class="escolha"><img src="tesoura.png"></div>

    </div>

    <h1 id="suaescolha">Faça a sua escolha</h1>


</body>

<script src="script.js"></script>

</html>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.