Entrar Ainda não tem acesso?
5
respostas

Problema no onclick

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Funções e atividade Clique no botão

por Arthur Elle dos Santos Lara
| 20k xp | 65 posts

Olá, tudo bem?

Estou com um problema para reproduzir o som Pom, não entendo porque o meu código parece idêntico com o da Vanessa.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <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>Alura MIDI</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap" rel="stylesheet">

    <link rel="icon" type="image/png" href="images/bateria.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">

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

</head>

function tocaSomPom () {
    document.querySelector('#som_tecla_pom').play();
}

document.querySelector ('.tecla_pom').onclick = tocaSomPom;

E no dev tools aparece a seguinte mensagem:

main.js:5 Uncaught TypeError: Cannot set properties of null (setting 'onclick')
    at main.js:5:47

Alguem poderia me dizer o que pode ser?

5 respostas
por Felipe Bezerra Joazeiro
| 268.2k xp | 28 posts

Bom dia.

Ao chamar a função "tocaSomPom" deve-se colocar o parênteses: "tocaSomPom()":

sendo assim:

document.querySelector ('.tecla_pom').onclick = tocaSomPom();
por Arthur Elle dos Santos Lara
| 20k xp | 65 posts

Olá, obrigado por me responder.

Mas o que acontece é que a instrutora explica que o tocaSomPom precisa estar sem o () para atribuir a função ao onclick, fazendo com que ao clicar no icone Pom tenha o som que esta no html, foi isso que entendi da video aula. Mas para testar retornei o () no código e não surtiu efeito.

por Arthur Elle dos Santos Lara
| 20k xp | 65 posts

Encontrei meu erro, coloquei o em head ao invez de colocar na última linha antes de fechar o body.

por Arthur Elle dos Santos Lara
| 20k xp | 65 posts

Mas agr fiquei na duvida do porque só o JS não fica em head com a tag link. Poderia me explicar isso?

por Luis Dias
| 2397.8k xp | 1803 posts
Developer (⌐■_■)

Oi, Arthur

Quando vc o coloca JS no "head" a página ainda não foi criada

Então:

// isso será nulo, pois '.tecla_pom' ainda não existe
document.querySelector ('.tecla_pom')