Html Question posted in
Some basic documentation can be found here.

Buttons don't react to anything in HTML

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.

Tags:

2

Answers


  1. 0 
    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;
  background: red
}

#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 {
  background: blue;
  position: absolute;
  top: 5%; / * 👈 here is the change * /
  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>

    The container element has position absolute and top: 0%, it covers the #toolbar. just make sure it’s not on top of it by decreasing it.

    and by the way, if I was in your place, I would give the toolbar a fixed height instead of 5%

    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: 60px;
  / * 👈 here is the change * / width: 100%;
  background-color: #999999;
  display: flex;
  align-items: center;
  border-bottom: 1px, solid, #000000;
}

#toolbar button {
  cursor: pointer;
  background: red
}

#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 {
  background: blue;
  position: absolute;
  top: calc(0% + 60px);
  / * 👈 here is the change * / 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>
    Login or Signup to reply.
  2. 0

    If you are using an absolutely-positioned overlay, you will need to make sure it is:

    • Transparent i.e. background-color
    • Raised i.e. z-index
    • Able to be clicked-through i.e pointer-events

    Note: You will also need to reset the pointer-events for the child by setting it to auto.

    Add the following rules

    #options-container {
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0);
  z-index: 999; /* Or anything larger than the z-index of the main UI */
}

#options {
  pointer-events: auto;
}

    Updated snippet

    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;
  /* Add */
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0);
  z-index: 999;
}

#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;
  /* Add */
  pointer-events: auto;
}

#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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search