2

Tenho uma aplicação bem simples em que desejo mudar a cor do texto ao clicar no botão. Sendo que quero tratar o evento onClick diretamente no arquivo .js, não no HTML. Alguém poderia apontar o que está errado no meu código? OBS: Todos os arquivos se encontram no mesmo diretório.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">

    <title>JS - Change Color</title>
</head>
<body>
    <h1 id="header">Click to change the color!</h1>
    <input type="button" id="colorButton" value="Click me!"></input>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS

.red-text {
    color: red;
}

Javascript

var colorButton = document.getElementById('colorButton');

colorButton.onClick = function () {
    console.log('clicked');
    header.className = 'red-text';
};

1 Resposta 1

4

O problema está na forma como foi escrito o onclick.

O erro ocorre pois o JS é case sensitive e a sintaxe correta é em minúsculo.

var colorButton = document.getElementById('colorButton');

colorButton.onclick = function () {
    console.log('clicked');
    header.className = 'red-text';
};
.red-text {
    color: red;
}
<h1 id="header">Clique para mudar a cor!</h1>
<input type="button" id="colorButton" value="Clique aqui!"></input>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .