Проблемы лежат в области видимости.переменная colorAtRandom не может быть найдена в функции checkKey ().сделайте это глобальным, и оно будет работать.
Вторая проблема заключается в том, что прослушиватель событий не работает.Я изменил его, поэтому он будет добавлен, когда кнопка нажата.Поскольку document.write создает новый документ, вы потеряете список событий, созданный при загрузке.поэтому это не рекомендуется.
это должно исправить это.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Tester</title>
<script type="text/javascript">
var colors = ['#ce0e0e', '#079b0c', '#3e3fd6']; //red, green, blue
var colorAtRandom = colors[Math.floor(Math.random() * colors.length)]; // this variable has to be global.
function changeBackground(){
//document.write("use 'a' key to change background"); using document.write is not advised.
colorAtRandom = colors[Math.floor(Math.random() * colors.length)]; // chose new random color. made it global to get rid of scope
document.body.style.backgroundColor = colorAtRandom;
document.getElementById('button').className = 'hidden';
window.addEventListener('keydown', checkKey, false); // add the event listener when button is pressed.
}
function checkKey(key){
console.log("test");
if (key.keyCode == 65){
if (colorAtRandom != '#ce0e0e'){
changeBackground();
} else {
alert('background is red');
changeBackground(); // change background after alert so it doesnt get stuck.
}
}
}
</script>
<style>
.hidden {
display:none;
}
.show {
display:block;
}
</style>
</head>
<body>
<input id=button type=button value='change backgound color' onclick='changeBackground()'>
</body>
</html>