Использование addeventlistener для добавления контента при нажатии переключателя в Javascript - PullRequest
Новая
       20

Использование addeventlistener для добавления контента при нажатии переключателя в Javascript

0 голосов
/ 19 февраля 2020

Я новичок в университете. Мне дали назначение, где мне нужно использовать addEventListener. Проблема в том, что я не использовал его раньше.

Что это за назначение, так это то, что у меня есть файл json со списком имен учеников. Моим первым упражнением было показать список всех студентов. Я это сделал. Но затем наступает сложная часть, где я не могу найти возможного решения, когда мне нужно показать только студентов, которые находятся в определенной программе. Для каждой из программ предусмотрены переключатели, и при нажатии на них необходимо отобразить список участников программы. Также есть переключатель, который говорит «все», который нужно выбрать всех студентов.

Вот мой javascript файл: 

  .then((response) => {
    return response.json();
})
  .then(function appendData(data) {
  var unordered = document.querySelector(".studenter");
  for (var i = 0; i < data.length; i++) {
    var li = document.createElement("li");
    li.innerHTML = 'Name: ' + data[i].fornavn + ' ' + data[i].etternavn;
    unordered.appendChild(li);
  }
});

Вот файл HTML : 

  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Studenter i IIKG1002 og IDG1011</title>
    <script defer src="js/studenterIKlasse.js"></script>
    <link rel="stylesheet" href="css/studenterIKlasse.css" />
  </head>
  <body>
    <h1>Studenter i IIKG1002 og IDG1011</h1>
    <p>Velg klasse</p>
    <div class="klasseVelger">
      <div>
        <input type="radio" name="programvelger" id="BIGEOMAT" />
        <label for="BIGEOMAT">Bachelor in Engineering, Geomatics</label>
      </div>
      <div>
        <input type="radio" name="programvelger" id="BWU" />
        <label for="BWU">Bachelor in Web Development</label>
      </div>
      <div>
        <input type="radio" name="programvelger" id="ÅRWEB" />
        <label for="ÅRWEB">Web Design - One-year programme</label>
      </div>
      <div>
        <input type="radio" name="programvelger" id="BIXD" />
        <label for="BIXD">Interaction Design - Bachelor's Programme</label>
      </div>
      <div>
        <input type="radio" name="programvelger" id="all" />
        <label for="all">Show all</label>
      </div>
    </div>
    <p>
    <ul class="studenter"></ul>
    </p>
  </body>
</html>

А вот пример того, как выглядит Объект ученика (json): 

{
  "fornavn": "Marcus Gimse",
  "etternavn": "Blikstad",
  "studieprogram": "Bachelor in Engineering, Geomatics",
  "forkortelse": "BIGEOMAT"
},
...