How to change the html contents depending upon which button on the page is pressed-CodePudding

When the "more" buttons are pressed on the page, a pop up modal appears with content inside of the modal. I want the text inside of the modal to change depending upon which button is pressed.

When I press the button "link" I want the html code with the header "one" to be inserted. When I press the linkTwo button I want the html code with the header "two" to be inserted. However, when I press either button all the HTML is inserted. How can I fix this?

Here's my code:

const link = document.querySelector('#subheader--link');
const linkTwo = document.querySelector('#subheader--link--two');
const overlay = document.querySelector('.overlay');
const learnContainer = document.querySelector('.learned__container');

class App {
  constructor() {
    link.addEventListener('click', this._openModal.bind(this));
    linkTwo.addEventListener('click', this._openModal.bind(this));
    this._renderList();
  }

  _openModal() {
    overlay.classList.remove('hide--overlay');
    learnContainer.classList.add('appear');
  }

  _renderList(e) {
    if (e.target === link)
      learnContainer.innerHTML  =
      ` 
          <h1 >One</h1>
          <ul id="list">
            <li id="list--item">One</li>
            <li id="list--item">One</li>
            <button id="close--one">Close</button>
          </ul>
        `
    if (e.target === linkTwo)
      learnContainer.innerHTML  =
      ` 
          <h1 >Two</h1>
          <ul id="list">
            <li id="list--item">Two</li>
            <li id="list--item">TWo</li>
            <button id="close--one">Close</button>
          </ul>
        `
  }
}

const app = new App

<div >
  <p id="title--header">Projects</p>
  <div >
    <div >
      <h1 id="subheader">Dymez Media</h1>
      <button id="subheader--link">More</button>
    </div>

    <p id="timeline--paragraph">
      Created this website for a photographer in Booklyn, New York. This was created using HMTL, CSS, and JavaScript. I packaged the code using Parcel, and deployed the site on Netlify with a custom domain that was purchased on Squarespace. The photos on the
      site were organized on the page using grid; making it easy to create media queries for browser resizing. Intersection Observers were used to have the images slowly fade in and have text move up into the viewport.<br><br> Visit site: <a href="https://dymezmedia.com/">here</a>
    </p>

  </div>
  <div >
    <p id="title--header"></p>
    <div >
      <div >
        <h1 id="subheader">Mapty</h1>
        <button id="subheader--link--two">More</button>
      </div>

      <p id="timeline--paragraph">
        Created this website for as a project in the JavaScript course that I completed. This website uses an API from leafty to add a map to the viewport based upon the users location. Core functionality of the site was coded in a JavaScript class, in order
        to make code neat and to utilize constructor functions to excute particular tasks on page load. Three other JavaScript classes were created called Workout, Running, and Cycling. The Running and Cycling classes are extended from the Workout class
        to apply prototypal inheritance and avoid having to write duplicate code. <br><br> Visit site: <a href="https://javascriptcourse-mapty.netlify.app/">here</a> (compatible only with computers)
      </p>
    </div>
    <div > </div>
  </div>

CodePudding user response：

link and linkTwo both exist on the DOM at all times. You are asking the if statement if they exist. Since they do exist, both conditional statements are being met.

To resolve, pass in the event object to renderList and put that into your if statements:

_renderList(e) {
  if (e.target === link) {
    // open link 1 
  }

  if(e.target === linkTwo) {
    //open link 2
  }
}

You will be able to differentiate between the two buttons like this.

Full refactor of the class

class App {
  constructor() {
    link.addEventListener('click', this._openModal);
    linkTwo.addEventListener('click', this._openModal);
  }

  _openModal(e) {
    overlay.classList.remove('hide--overlay');
    learnContainer.classList.add('appear');

    if (e.target === link)
      learnContainer.innerHTML  =
        ` 
          <h1 >One</h1>
          <ul id="list">
            <li id="list--item">One</li>
            <li id="list--item">One</li>
            <button id="close--one">Close</button>
          </ul>
        `
    if (e.target === linkTwo)
      learnContainer.innerHTML  =
        ` 
          <h1 >Two</h1>
          <ul id="list">
            <li id="list--item">Two</li>
            <li id="list--item">TWo</li>
            <button id="close--one">Close</button>
          </ul>
        `
  }
}