Buttons don’t react to anything in HTML

40 viewscsshtmljavascript
0

I’m making a Geometry renderer, and so far made a toolbar with buttons that are supposed to open a window and change its name and content. But the buttons don’t react to clicking or turning the mouse to a pointer and i don’t know why. Here’s the file:

const own = document.getElementById('options-name');
const options = document.getElementById('options');
const owc = document.getElementById('options-close');
owc.addEventListener('click', () => {
  options.style.display = 'none';
});

const fileb = document.getElementById('file-button');
fileb.addEventListener('click', () => {
  options.style.display = 'block';
  own.innerHTML = 'File';
});

const settingsb = document.getElementById('settings-button');
settingsb.addEventListener('click', () => {
  options.style.display = 'block';
  own.innerHTML = 'Settings';
});

const helpb = document.getElementById('help-button');
helpb.addEventListener('click', () => {
  options.style.display = 'block';
  own.innerHTML = 'Help';
});

const commandBlocb = document.getElementById('command-button');
commandBlocb.addEventListener('click', () => {
  options.style.display = 'block';
  own.innerHTML = 'Command Bloc';
});

const savedCommandsb = document.getElementById('saved-commands-button');
savedCommandsb.addEventListener('click', () => {
  options.style.display = 'block';
  own.innerHTML = 'Saved Commands';
});

const hierarchyb = document.getElementById('hierarchy-button');
hierarchyb.addEventListener('click', () => {
  options.style.display = 'block';
  own.innerHTML = 'Hierarchy';
});
* {
  color: #000000;
  font-size: 100%;
  user-select: none;
}

p {
  margin: 0;
}

button {
  cursor: pointer;
}

html,
body {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  margin: 0;
}

#toolbar {
  height: 5%;
  width: 100%;
  background-color: #999999;
  display: flex;
  align-items: center;
  border-bottom: 1px, solid, #000000;
}

#toolbar button {
  cursor: pointer;
}

#file-button,
#settings-button,
#help-button,
#command-button,
#saved-commands-button,
#hierarchy-button {
  border: none;
  background: #999999;
  margin-inline: 1%;
}

#command-button {
  margin-left: auto;
}

#options-container {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#options {
  position: absolute;
  top: 12%;
  left: 12%;
  transform: translate(0%, 0%);
  height: 75%;
  width: 75%;
  border-radius: 20px;
  background-color: #888888;
  overflow: hidden;
  display: none;
}

#render {
  height: 95%;
  width: 100%;
}

#options-upper-bar {
  background-color: #333333;
  height: 5%;
  display: flex;
  align-items: center;
}

#options-name {
  color: #ffffff;
  margin-inline: 5%;
}

#options-close {
  color: #cc0000;
  margin-inline: 5%;
  margin-left: auto;
  font-size: 200%;
}
<div id="toolbar">
  <button id="file-button">File</button>
  <button id="settings-button">Settings</button>
  <button id="help-button">Help</button>
  <button id="command-button">Command Bloc</button>
  <button id="saved-commands-button">Saved Commands</button>
  <button id="hierarchy-button">Hierarchy</button>
</div>
<div id="render"></div>
<div id="options-container">
  <div id="options">
    <div id="options-upper-bar">
      <p id="options-name"></p>
      <p id="options-close">×</p>
    </div>
    <div id="file"></div>
    <div id="settings"></div>
    <div id="help"></div>
    <div id="command-bloc"></div>
    <div id="saved-commands"></div>
    <div id="hierarchy"></div>
  </div>
</div>

First, the buttons didn’t have background, so I added it expecting the background to catch the click or something.