HTML onclick event doesn't work with parameter

Question

When I click my button, which should make things visible and invisible, the whole website disappears.

What I was trying to do is to make a div with some text and probably some images and let it disappear and appear, when the button gets hit. So it would look like the Information box lists more information’s, when the user wants to read them.

But I would like to get a solution, witch I can use for more boxes like this one, so I can only copy the html and switch the onclick parameter and id from the div to 2, 3 ...

function open(x) {
  var more_info = document.getElementById("project_info_" + x);
  if (more_info.style.display == "none") {
    more_info.style.display = "unset";
  } else {
    more_info.style.display = "none";
  }
}

.project-box {
  padding: 2vh;
  margin-bottom: 3vh;
  box-shadow: 0px 5px 7px rgb(136, 136, 136);
}

.project-button {
  width: 20vw;
  height: 3vh;
  background-color: #d6d6d6;
  border: none;
}

.project-button:hover {
  background-color: #B50000;
  color: white;
}

.project-button:focus,
.project-button:active,
.project-button:visited {
  border: none;
  border-radius: 0;
}

.project-closed {
  display: none;
}

* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vh;
}

<div class="project-box" id="project_1">
  <h3>Project 1</h3>
  <p>description</p>
  <div class="project-closed" id="project_info_1">
    <p>Informations</p>
  </div>
  <button class="project-button" onclick="open(1)">More details</button>
</div>

It's best to try and debug things yourself. Open the JS console and try first to see what element is returned by console.log(document.querySelectorAll('#project_info_1')); next, insert console.log statements and take a look at the css through the inspector. We don't know the overall structure of your site, if there are for example other elements with that id on the page. — wawa
– wawa, Commented Jan 12, 2021 at 15:29
@wawa — That won't help since that line of the OP's code isn't even being called. — Quentin
– Quentin, Commented Jan 12, 2021 at 15:32

Quentin · Accepted Answer · 2021-01-12 15:31:50Z

2

The problem is that you have called the function open which is getting you caught up in this problem.

Because of the (horrible, horrible) way intrinsic event attributes work you are calling document.open instead of your self-defined global open function.

document.open wipes out the entire document ready for document.write to write a new one.

The quick fix is to call your function something else.

The better solution is to switch to addEventListener.

answered Jan 12, 2021 at 15:31

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mplungjan · Accepted Answer · 2021-01-13 06:06:12Z

1

Your problem is using open - although not a reserved word - in the onclick which performs a document.open (I would have guessed window.open) and that will wipe the page in any case

Rename the function but I strongly recommend you remove the inline event handler and use an eventListener

I added the IDs of the divs to show as data attribute to the buttons you click

document.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("project-button")) {
    const more_info = document.getElementById(tgt.dataset.id);
    more_info.classList.toggle("project-closed");
  }
})

.project-box {
  padding: 2vh;
  margin-bottom: 3vh;
  box-shadow: 0px 5px 7px rgb(136, 136, 136);
}

.project-button {
  width: 20vw;
  height: 3vh;
  background-color: #d6d6d6;
  border: none;
}

.project-button:hover {
  background-color: #B50000;
  color: white;
}

.project-button:focus,
.project-button:active,
.project-button:visited {
  border: none;
  border-radius: 0;
}

.project-closed {
  display: none;
}

* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vh;
}

<div class="project-box" id="project_1">
  <h3>Project 1</h3>
  <p>description</p>
  <div class="project-closed" id="project_info_1">
    <p>Informations</p>
  </div>
  <button type="button" class="project-button" data-id="project_info_1">More details</button>
</div>

<div class="project-box" id="project_2">
  <h3>Project 2</h3>
  <p>description</p>
  <div class="project-closed" id="project_info_2">
    <p>Informations</p>
  </div>
  <button type="button" class="project-button" data-id="project_info_2">More details</button>
</div>

edited Jan 13, 2021 at 6:06

answered Jan 12, 2021 at 15:29

mplungjan

180k29 gold badges183 silver badges246 bronze badges

2 Comments

mplungjan Over a year ago

Hmm, interesting I could have sworn open would be window.open

Quentin Over a year ago

As I said, the way onclick works is really horrible. It searches up the DOM for a match, so it hits document.open before trying window.open.

Collectives™ on Stack Overflow

HTML onclick event doesn't work with parameter

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related