Pop-up sequence

Question

I am trying to implement a sequence of 3 pop-up windows for a personal project (job search website).

1. The first pop-up is to have informations about the position
2. The second one is to fill up the contact form
3. The last one is a confirmation message

The transition is made when the user click on a button. For the first page it is ".apply-button"

First of all, I was wondering if I should create 3 distinct HTML documents or should I use just use? (the content outside of the pop-up box will be the same).

Secondly, I have difficulties to implement the transition between the first and the second pop-up page.

<div class="popup-wrapper popup-wrapper-1">
   <div class="popup">
     <div class="popup-close">x</div>
       <div class="popup-content">
         <h2>Job Details</h2>
           <div class="popup-job-description">
               <div class="job-descriptions">
                   <p><span class="popup-job-description-title">Title: </span>Proccess Engineer</p>
              </div>
              <div class="job-descriptions">
                  <p><span class="popup-job-description-company">Company: </span>Undisclosed</p>
             </div>

            <div class="job-descriptions">
                 <p><span class="popup-job-description-location">Location: </span>Naypyitaw</p>
            </div>
            <div class="job-descriptions">
                <p><span class="popup-job-description-location">Salary: </span>$75,000</p>
           </div>
           <div class="job-descriptions">
               <p><span class="popup-job-description-description">Description: </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et similique ex, iusto sint in ratione aut magnam! Accusamus eveniet aspernatur nihil? Distinctio vel fugiat eius eaque? Quas earum adipisci quis voluptate animi id atque alias. Sapiente aut explicabo voluptate!</p>
          </div>
          <div>
            <a class="apply-button">Apply Now</a>
          </div>
     </div>
   </div>

<div class="popup-wrapper popup-wrapper-2">
   <div class="popup">
      <div class="popup-close">x</div>
          <div class="popup-content">
             <h2>Only Few More Seconds...</h2>
                 <div class="popup-job-description">
                    <div class="contact-form">
                       <p class="sub">
                         <label>First Name:</label>
                         <input type="text" name="name">
                       </p>
                       <p class="sub">
                          <label>Last Name:</label>
                          <input type="text" name="company">
                       </p>
                       <p class="sub">
                         <label>Email:</label>
                         <input type="email" name="email">
                       </p>
                       <p class="sub">
                         <label>Phone:</label>
                         <input type="email" name="email">
                       </p>                             
                       <p class="sub">
                           <label>Resume:</label>
                           <input type="file" name="resume">
                       </p>   
                   </div>
                   <div>
                      <a class="complete-button">Apply Now</a>
               </div>
       </div>
   </div>

JS part:

const apply = document.querySelector(".apply-button");
const applyOffer = document.querySelector(".popup-wrapper-1");
const applyContact = document.querySelector(".popup-wrapper-2");
apply.addEventListener("click",()=>{
    console.log('test');
    applyOffer.style.display="none";
    applyContact.style.display="block";

});  

Answer 1

I'm not sure what's causing the problem wherever you're doing your testing, but it doesn't seem to be an issue with the JavaScript you posted.
This simplified snippet uses your script to demonstrate how a click-listener can update the display property of the style attribute of an HTML element.

The CSS I added hides the second "popup-wrapper" div initially. When the button is clicked, your JavaScript hides the first one and displays the second one.

(Note that querySelector returns the first matching element, so with the existing HTML, your script applies to the correct elements, but if you add additional elements with the popup-wrapper-1 class, for example, this behavior could change.)

 const apply = document.querySelector(".apply-button"); const applyOffer = document.querySelector(".popup-wrapper-1"); const applyContact = document.querySelector(".popup-wrapper-2"); apply.addEventListener("click",()=>{ console.log('test'); applyOffer.style.display="none"; applyContact.style.display="block"; });

 .popup-wrapper-2{ display: none; }

 <div class="popup-wrapper popup-wrapper-1">Popup #1</div> <div class="popup-wrapper popup-wrapper-2">Popup #2</div> <button class="apply-button">Apply</button>

Answer 2

Question 1: This is largely a matter of opinion and design. If the popups are going to be used frequently, and they are in a document that is not so large it is difficult to manage, then it is just fine, and probably recommended to keep them in one document. This will make it much easier to work with. However, if you almost never use them, or if the popups are really large, then it could be helpful to break them up into separate documents. And if you don't want them to be completely separate pages, you can just use AJAX to load them in. Then they will act exactly the same as if they were one document, but be easier to maintain.

Question 2: First, both of the snippets of HTML you provided are missing two closing </div> tags at the end. This is probably just a copy and paste error when you were making your question. Once that is fixed, the real issue is that your button has an href attribute which is causing the browser to navigate to a new page. This happens immediately after your JavaScript executes, which is not what you want. There are two solutions:

Solution 1: Prevent the default action of the link when clicked. Simply add the click event as a parameter to your event function and call event.preventDefault() and the browser will not navigate to a new page.

apply.addEventListener("click", (event) => {
  console.log('test');
  event.preventDefault();
  applyOffer.style.display = "none";
  applyContact.style.display = "block";
});

Solution 2: Remove the href attribute from your .apply-button link. This will remove the default styling of a tags in most browsers, but it seems like you are overriding it anyways.

Note: With both of these solutions, your site will break if JavaScript is disabled. For most people, this is a non-issue, but if you want it to work regardless, you could make it work by navigating to a new page with the link which will work without JavaScript, but prevent the default and use a popup if JavaScript is available.