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';
};