javascript - addEventListener 对象的数组循环问题

Question

我需要一些有关香草 JS 的帮助。我必须按其中一个按钮显示课程列表，另一个显示考试列表。但是当我试图遍历他们自己的对象数组时。它们相互覆盖。但是我想在单击课程按钮时显示课程列表，并在单击考试按钮时显示考试列表。这是代码。现场版https://codepen.io/ruslancik/pen/MWyYBzq?editors=1010

JavaScript。我将 {once:true} 作为最后一个参数添加到 addEventListener。否则，它会在每次点击时循环并相互添加

const exams = [{
    point: '681 points',
    group: 'II group',
    time: '48 minute',
    date: '22 july 2020, 17:30'
  },
  {
    point: '651 points',
    group: 'II group',
    time: '48 minute',
    date: '22 july 2020, 17:30'
  }
];
const lessons = [{
    points: '58%',
    group: 'Math',
    time: '48 minutes',
    date: '22 may 2020, 17:30'
  },
  {
    points: '75%',
    group: 'English',
    time: '36 minute',
    date: '16 may 2020, 17:30'
  }
];

const examSelector = document.getElementById('exam');
const lessonSelector = document.getElementById('lesson');

examSelector.innerText = `Exams (${exams.length})`;
lessonSelector.innerText = `Lessons (${lessons.length})`;


const resultContainer = document.getElementById('result');

examSelector.addEventListener('click', function() {
  exams.forEach(item => {
    const resultList = document.createElement('DIV');
    resultList.className = 'result-list'
    resultContainer.appendChild(resultList);
    resultList.innerHTML = `
            <ul>
             <li>${item.points}</li>
             <li>${item.group}</li>
             <li>${item.time}</li>
             <li>${item.date}</li>
            </ul>
            `
  })
}, {
  once: true
});


lessonSelector.addEventListener('click', function() {
  lessons.forEach(item => {
    const resultList = document.createElement('DIV');
    resultList.className = 'result-list'
    resultContainer.appendChild(resultList);
    resultList.innerHTML = `
              <ul>
             <li>${item.points}</li>
             <li>${item.group}</li>
             <li>${item.time}</li>
             <li>${item.date}</li>
            </ul>
            `

  })

}, {
  once: true
});

<button id="exam" class="selector">Exam</button>
<button id="lesson" class="selector">Lesson</button>


<div id='result' class="result"></div>

标签： javascriptdom

Answer 1

我猜你想这样做吗？

//Neticeler

const exams = [
    {
        points: '681 points',
        group: 'II group',
        time: '48 minute',
        date: '22 july 2020, 17:30'
    },
    {
       points: '651 points',
        group: 'II group',
        time: '48 minute',
        date: '22 july 2020, 17:30'
    }
];
const lessons = [
    {
        points: '58%',
        group: 'Math',
        time: '48 minutes',
        date: '22 may 2020, 17:30'
    },
    {
        points: '75%',
        group: 'English',
        time: '36 dəqiqə',
        date: '16 may 2020, 17:30'
    }
];

const examSelector = document.getElementById('exam');
const lessonSelector = document.getElementById('lesson');

examSelector.innerText = `Exams (${exams.length})`;
lessonSelector.innerText = `Lessons (${lessons.length})`;


const resultContainer = document.getElementById('result');

examSelector.addEventListener('click', function(){
    const resultList = document.querySelector('.result-list') || document.createElement('DIV');
    resultList.innerHTML = '';
    exams.forEach(item => {
        if (resultList.parentNode) resultList.parentNode.removeChild(resultList);
        resultList.className = 'result-list'
        resultContainer.appendChild(resultList);
        resultList.innerHTML += `
        <ul>
         <li>${item.points}</li>
         <li>${item.group}</li>
         <li>${item.time}</li>
         <li>${item.date}</li>
        </ul>
        `
     })
});


lessonSelector.addEventListener('click', function() {
    const resultList = document.querySelector('.result-list') || document.createElement('DIV');
    resultList.innerHTML = '';
    lessons.forEach(item => {
        
        if (resultList.parentNode) resultList.parentNode.removeChild(resultList);
        resultList.className = 'result-list'
        resultContainer.appendChild(resultList);
        resultList.innerHTML += `
          <ul>
         <li>${item.points}</li>
         <li>${item.group}</li>
         <li>${item.time}</li>
         <li>${item.date}</li>
        </ul>
        `

     })

});

<button id="exam" class="selector">Exam</button>
<button id="lesson" class="selector">Lesson</button>


<div id='result' class="result"></div>