Cant make dom manipulation work when making a changeBackgroundColor program

I was practising my js since I’m a 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.

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]
}

body {
  background-color: red;
}

.button {
  background: transparent;
}

<script src="app.js"></script>
<link rel="stylesheet" href="style.css">

<div class="button-style">
  <button class="button">Click me!</button>
</div>