如何连续运行JavaScript函数？

Question

I'm working through https://javascript30.com Challenge 5. I've got the solution working, but am trying to 'upgrade' so that all 'open' panels will close before the new panel will open.

Anyway, more specifically, in this context, when a panel is clicked, I need closeOpens() to run. After that, I need the clicked on panel to proceed with opening, etc.

const PANELS = document.querySelectorAll('.panel');
/**
  * Look for open panels and close them.
*/
function closeOpens() {
  let opens = document.querySelectorAll('.open');
  console.log('hi'); // TODO: Doesn't display!

  // Close any 'open' panels first!
  if (opens.length > 0) {
    opens.forEach((o) => {
      o.classList.remove('open');
    });
  }
}

PANELS.forEach((panel) => {
  panel.addEventListener('click', closeOpens => {
  panel.classList.add('open');

  });

  panel.addEventListener('transitionend', e => {
    if (e.propertyName.includes('flex')) {
      e.target.classList.toggle('v-slide-in');
    }
  });
});

As indicated above, console.log('hi'); is not running. The 'click' event just proceeds to ...add('open)'

For completeness, here's the rest of the markup and styles, but this is really just a JS issue:

<style>
    html {
      box-sizing: border-box;
      background: #ffc600;
      font-family: 'helvetica neue';
      font-size: 20px;
      font-weight: 200;
    }

    body {
      margin: 0;
    }

    *,
    *: before,
    *: after {
      box-sizing: inherit;
    }

    .panels {
      min-height: 100vh;
      overflow: hidden;

      display: flex;
    }

    .panel {
      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
      color: white;
      text-align: center;
      align-items: center;
      /* Safari transitionend event.propertyName === flex */
      /* Chrome + FF transitionend event.propertyName === flex-grow */
      transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
      flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
      background 0.2s;
      font-size: 20px;
      background-size: cover;
      background-position: center;
      flex: 1;
      /* Split space amongst children */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .panel1 {
      background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
    }

    .panel2 {
      background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
    }

    .panel3 {
      background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
    }

    .panel4 {
      background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
    }

    .panel5 {
      background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
    }

    .panel>* {
      margin: 0;
      width: 100%;
      transition: transform 0.5s;

      flex: 1 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .panel>*:first-child {
      transform: translateY(-100%);
    }

    .panel.v-slide-in>*:first-child,
    .panel.v-slide-in>*:last-child {
      transform: translateY(0);
    }

    .panel>*:last-child {
      transform: translateY(100%);
    }

    .panel p {
      text-transform: uppercase;
      font-family: 'Amatic SC', cursive;
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
      font-size: 2em;
    }

    .panel p: nth-child(2) {
      font-size: 4em;
    }

    .panel.open {
      font-size: 40px;
      flex: 5;
    }
  </style>

  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>

Answer 1

Simply, call closeOpens() inside the click handler. It will close the existing open panel and then open the clicked panel.

panel.addEventListener('click', () => {
  closeOpens();
  panel.classList.add('open');
});

 const PANELS = document.querySelectorAll('.panel'); /** * Look for open panels and close them. */ function closeOpens() { let opens = document.querySelectorAll('.open'); console.log('hi'); // TODO: Doesn't display! // Close any 'open' panels first! if (opens.length > 0) { opens.forEach((o) => { o.classList.remove('open'); }); } } PANELS.forEach((panel) => { panel.addEventListener('click', () => { closeOpens(); panel.classList.add('open'); }); panel.addEventListener('transitionend', e => { if (e.propertyName.includes('flex')) { e.target.classList.toggle('v-slide-in'); } }); }); 

 html { box-sizing: border-box; background: #ffc600; font-family: 'helvetica neue'; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *: before, *: after { box-sizing: inherit; } .panels { min-height: 100vh; overflow: hidden; display: flex; } .panel { background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1); color: white; text-align: center; align-items: center; /* Safari transitionend event.propertyName === flex */ /* Chrome + FF transitionend event.propertyName === flex-grow */ transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s; font-size: 20px; background-size: cover; background-position: center; flex: 1; /* Split space amongst children */ display: flex; flex-direction: column; justify-content: center; } .panel1 { background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } .panel2 { background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); } .panel3 { background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } .panel4 { background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } .panel>* { margin: 0; width: 100%; transition: transform 0.5s; flex: 1 0 auto; display: flex; justify-content: center; align-items: center; } .panel>*:first-child { transform: translateY(-100%); } .panel.v-slide-in>*:first-child, .panel.v-slide-in>*:last-child { transform: translateY(0); } .panel>*:last-child { transform: translateY(100%); } .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; } .panel p: nth-child(2) { font-size: 4em; } .panel.open { font-size: 40px; flex: 5; } 

 <div class="panels"> <div class="panel panel1"> <p>Hey</p> <p>Let's</p> <p>Dance</p> </div> <div class="panel panel2"> <p>Give</p> <p>Take</p> <p>Receive</p> </div> <div class="panel panel3"> <p>Experience</p> <p>It</p> <p>Today</p> </div> <div class="panel panel4"> <p>Give</p> <p>All</p> <p>You can</p> </div> <div class="panel panel5"> <p>Life</p> <p>In</p> <p>Motion</p> </div> </div> 

Answer 2

It sounds like you have two functions to perform: closing all panels, and opening one. Start with the two tasks you need to perform and don't worry about the events yet.

function closePanels(){
    //do work
}

function openPanel(el){
    //do work
}

Now that you have the ability to do what needs doing, you can wire them up in a logical multistep task.

PANELS.forEach((panel) => {
  panel.addEventListener('click', function(){
        closePanels();
        openPanel(this);
  });
});

This way we've separated individual units of work from our specific complex task.