erro ao clicar no bot�o de sortear : script.js:12 Uncaught TypeError: Cannot read properties of undefined

14/05/2024

est� aparecendo esse erro ao clicar no bot�o de sortear : script.js:12 Uncaught TypeError: Cannot read properties of undefined (reading ''''add'''')
at script.js:12:22



// SELECIONAR ELEMENTOS
let numeroSorteado = document.querySelector(''''#dado'''');
let imgDado = document.querySelector(''''#imgDado'''');
let btnSortear = document.querySelector("#btnSortear");
let sorteado = document.querySelector(''''#sorteado'''');
let dadoRolando = document.querySelector(''''#dadoRolando'''');

addEventListener("click", function() {
    // adicionar a animacao
    imgDado.classList.add(".animar")
    sorteado.classList.add(''''aparecer'''')

    // tocar o efeito sonoro
    dadoRolando.play()

// ocultar o botao Sortear
    btnSortear.style.display = ''''none''''

// usar setTimeout para executar as acoes apos 1.75 segundos
    setTimeout(function() {

        // ARMAZENAR NUMERO SORTEADO NA VARIAVEL
        numeroSorteado = getRandomInt(1,6)

        // escrever o numero sorteado no console
        console.log(numeroSorteado)

        // definir atributo src com base no numero
        imgDado.setAttribute(''''src'''' , ''''images/dado''''+numeroSorteado+''''.png'''')
        // escrever no paragrafo numeroSorteado
        sorteado.textContent = numeroSorteado
        
        // exibir o botao Sortear
        btnSortear.style.display = ''''inline-block''''
        
        // retirar a animacao
        imgDado.classList.remove(''''animar'''')
        sorteado.classList.remove(''''aparecer'''')
    }, 1750)

})

// FUNCAO que gera numero randomico inteiro
// incluindo o minimo e o maximo
function getRandomInt(min, max) {
    min = Math.ceil(min)  // arredonda para cima  ceil  = teto
    max = Math.floor(max) // arredonda para baixo floor = piso
    return Math.floor(Math.random() * (max - min + 1)) + min
}

html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="icon" href="images/dado/favicon.png" />
<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>dado</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>
<main id=''''tela-principal''''>
<h1>Virtual Dice</h1>
<section class=''''conteudo''''>
<p id=''''sorteado'''' class=''''centro''''>?</p>
<figure>
<img
src="images/dado/0.png"
alt="Dado"
id=''''imgDado''''
/>
</figure>
</section>
<p class=''''centro''''><button id=''''btnSortear''''>Sortear</button></p>
</main>

<audio preload
id=''''dadoRolando''''
src="assets/dado-rolando.mp3" type="audio/mpeg">
</audio>

</body>
</html>

css:

@import url(''''https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap'''');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ''''Roboto'''', sans-serif;
}

body {
width: 100vw;
height: 100vh;
background: #ececec;
}

main {
width: 100%;
height: 100%;
padding: 1rem; /* espacamento interno */
}

section {
width: 100%;
margin: 0 auto;
padding: 1rem;
margin-bottom: 0.625rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

h1 {
text-align: center;
font-size: 1.5rem;
}

.centro {
margin-top: 0.625rem;
text-align: center;
}

#imgDado {
width: 200px;
}

#btnSortear {
padding: 5px;
border: 0;
border-radius: 5px;
background: #673ab7;
color: #fff;
cursor: pointer;
}

#btnSortear:hover {
box-shadow: 1px 1px 5px blueviolet;
}

#sorteado {
background: #311b92;
color: #fff;
padding: 5px 10px;
border-radius: 50%;
margin-bottom: 0.5rem;
}

/* Animar o dado */
@keyframes mover {
0% {
transform: translateY(0px); /* mover no eixo Y vertical */
transform: rotate(45deg); /* rotacionar 90 graus */
opacity: 0; /* opacidade 0 = 100% transparente */
}
50% {
transform:scale(50%); /* mudar tamanho para 50% */
}
100% {
transform: translateY(-15px); /* mover no eixo Y vertical */
transform: rotate(-45deg); /* rotacionar -90 graus */
opacity: 1; /* opacidade 1 = 0% transparente */
}
}

@keyframes aparecer {
to {
opacity: 0; /* opacidade 0 = 100% transparente */
}
from {
opacity: 1; /* opacidade 1 = 0% transparente */
}
}

.animar {
animation: mover 0.5s infinite alternate;
/*
animation: mover .5s infinite alternate;
animation: mover .5s linear infinite;
animation-iteration-count: infinite;
animation-direction: alternate; */
}

.aparecer {
animation: aparecer 1.5s ease-in;
}

Pedro Alencar

Curtir t�pico + 0

Responder