The title says it all. I have tried several implementations of this code, this is the most recent:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="trials.css">
</head>
<body>
<script src="trials.js"></script>
<button class = "again">PUSH ME</button>
</body>
</html>
'use strict'
document.querySelector('.again').addEventListener('click', function() {
let paletteOne = Math.trunc(Math.random() * 256 + 1),
paletteTwo = Math.trunc(Math.random() * 256 + 1),
paletteThree = Math.trunc(Math.random() * 256 + 1);
let colors = `rgb(${paletteOne}, ${paletteTwo}, ${paletteThree})`;
document.querySelector('body').style.backgroundColor = colors;
});
I am very new to JS and intermediate programming.
I tried changing from querySelector to getElementById(‘#again’). Basically just changing the first line of the JS to:
document.getElementById('#again').addEventListener('click' function () { ...
I also had it split up before so that I assigned by Id to a variable:
const colorSwitchModal = document.getElementById('again');
colorSwitchModal.addEventListener('click', function() { ...
//code
let colors = `rgb(${paletteOne}, ${paletteTwo}, ${paletteThree});
return colors;
});
document.querySelector('body').style.backgroundColor = colors;
New contributor
Andres M is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.