如何重复 javascript function 以及如何反转一个

Question

I'm a little bit ashamed to admit, that i'm not that good with javascript. I need some help. There's a modal that opens with the help of Javascript, however i'm going to give you some code that is simplified.

imagine that there's a button somewhere in this universe That's the modal in html and css

< div class="modal" > < /div >
.modal {width: 0vw;}
.modal-open {width: 50vw;}

Javascript - document.getElementById('that-button').addEventListener('click', function () {
  document.querySelector('.modal').classList.add('modal-open');
});

And there's another button to close it. Again - imagination is needed

Javascript - document.getElementById('that-other-button').addEventListener('click', function () {
  document.querySelector('.modal').classList.add('modal-close');
});

.modal-close {width: 0vw;}

Long story short, the modal stays hidden with width:0vw and by pressing the open button, it opens with more width. By pressing the close button, the modal closes.

However after that the modal cannot be opened again. I would like to know how.

Second issue: imagine the same scenario however without the closing button. Is it possible, to open and close the modal with the open modal button by integrating some reverse function?

I'd like to thank in advance.

With very best regards,

Anthony Ivanov

Answer 1

When you open it, it gains the the class modal-open .

When you close it, it gains the class modal-close so now it has both classes.

Clicking the open button again does nothing because it already has that class.

---

Don't use two classes to track the state of something that can be in two states.

Use one class. add it to open and remove it to close it.

---

Is it possible, to open and close the modal with the open modal button by integrating some reverse function?

In the general case, no. There's no way to say "Do what this arbitrary function does but backwards". What a function does might not even be reversible.

In this case, you can toggle the class instead of adding and removing it.

Answer 2

It sounds like the existence of the modal-close class overrides rules set by the modal-open class, so if it gets closed, it'll stay closed.

Rather than having two separate classes, consider using just a single one instead: have it closed by default, and then have .modal-open change the width. When you want to close it, don't add another class - instead, remove the existing class:

document.getElementById('that-other-button').addEventListener('click', function () {
  document.querySelector('.modal').classList.remove('modal-open');
});