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>

Answer 1

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 .

Answer 2

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>

Answer 3

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>