What is causing my javascript function to not run?

I'm trying to make a simple dress-up game with html and js, but I'm not sure why the function isn't working. The window onload event is being logged, but the makeupclass1 function is not doing anything. Sorry if this turns out to be a really stupid mistake, I've just started learning. Here is the code:

window.onload = (event) => {
  console.log("page is fully loaded");
};

function makeupclass1() {
  document.getElementById('makeup').setAttribute("class", "makeup1");
  console.log("makeup changed");
}

#makeup {
  width: 720px;
  height: 1280px;
  background-size: cover;
  position: absolute;
}

.makeup1 {
  background-image: url('img/makeup1.png');
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

  <div id="makeup"></div>

  <button onclick="makeupclass1()">option 1</button>
</body>
</html>

I've run the code through a few validators and nothing has come up. I've tried using className instead, and I've tried having the function directly inside the onclick.

Thanks

Solution

#makup covers the button, so add pointer-events:none to it:

window.onload = (event) => {
  console.log("page is fully loaded");
};

function makeupclass1() {
  document.getElementById('makeup').setAttribute("class", "makeup1");
  console.log("makeup changed");
}

#makeup {
  width: 720px;
  height: 1280px;
  background-size: cover;
  position: absolute;
  pointer-events:none;
}

.makeup1 {
  background-image: url('img/makeup1.png');
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

  <div id="makeup"></div>

  <button onclick="makeupclass1()">option 1</button>
</body>
</html>

z-index would do the trick also if you are allowed to move the button above the overlay:

window.onload = (event) => {
  console.log("page is fully loaded");
};

function makeupclass1() {
  document.getElementById('makeup').setAttribute("class", "makeup1");
  console.log("makeup changed");
}

#makeup {
  width: 720px;
  height: 1280px;
  background-size: cover;
  position: absolute;
  background: rgba(255,0,0,.2);
}

button {
  z-index: 1;
  position: relative;
  background-image: url('img/makeup1.png');
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

  <div id="makeup"></div>

  <button onclick="makeupclass1()">option 1</button>
</body>
</html>

Sometimes it's needed to catch events on an overlay and some elements behind it, so you should detect the clicks manually (you would need to imitate hover and mouse down states also probably):

window.onload = (event) => {
  console.log("page is fully loaded");
};

makeup.onclick = e => {
  let display;
  [display, makeup.style.display] = [makeup.style.display, 'none'];
  const elem = document.elementFromPoint(e.pageX, e.pageY);
  makeup.style.display = display;
  elem.matches('button') && elem.click();
}

function makeupclass1() {
  document.getElementById('makeup').setAttribute("class", "makeup1");
  console.log("makeup changed");
}

#makeup {
  width: 720px;
  height: 1280px;
  background-size: cover;
  position: absolute;
}

.makeup1 {
  background-image: url('img/makeup1.png');
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

  <div id="makeup"></div>

  <button onclick="makeupclass1()">option 1</button>
</body>
</html>