I was practicing my js since ima beginner and was trying to make a program to change the background color but whenever I was trying to use dom-manipulation nothing happened if anybody knows why that happens I would be very thankful.
HTML source:
<!DOCTYPE HTML>
<html lang="en">
<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">
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="button-style">
<button class="button">Click me!</button>
</div>
</body>
</html>
CSS code:
body{
background-color: red;
}
.button{
background:transparent;
}
Js script:
const button = document.querySelector('.button')
const body = document.querySelector('body')
const colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple']
body.style.backgroundColor = 'violet'
button.addEventListener('click', changeBackground)
function changeBackground(){
const colorIndex = parseInt(Math.random()*colors.length)
body.style.backgroundColor = colors[colorIndex]
}