Проверьте, находится ли ученик в правильном классе, и показывайте только тех учеников, которые ходят в классе, который нажат - PullRequest
Новая
       23

Проверьте, находится ли ученик в правильном классе, и показывайте только тех учеников, которые ходят в классе, который нажат

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

У меня есть задание, где выложен сценарий html, который показывает переключатели с произнесением названия каждого класса и файл json, в котором перечислены все имена учеников и какой класс они тоже go.

Интересно, есть ли способ использовать addEventListener для этого? Потому что я слышал, что это правильное решение, и я должен делать то, что говорит профессор.

Мне не разрешено изменять код HTML. 

fetch("studenter.json")
  .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);
  }
});


<!DOCTYPE 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"
  },

1 Ответ

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

Конечно

Вы были почти там

ПРИМЕЧАНИЕ: я переименовал данные для студентов 

// fetch here and keep the data - uncomment the next 4 lines when ready
// let students = [];
// fetch("studenter.json")
//  .then(response => response.json())
//  .then(data => students = data);


// example data. Remove when doing fetch
const students = [{ "fornavn": "Marcus Gimse", "etternavn": "Blikstad", "studieprogram": "Bachelor in Engineering, Geomatics", "forkortelse": "BIGEOMAT"}];


// using delegation - i.e. a click on anything in klasseVelger will give the target in event.target
document.querySelector(".klasseVelger").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.type && tgt.type === "radio") {
    const id = tgt.id;
    console.log(id); // can be removed
    var unordered = document.querySelector(".studenter");
    unordered.innerHTML = ""; // reset
    for (var i = 0; i < students.length; i++) {
      if (id === "all" || id === students[i].forkortelse) {
        var li = document.createElement("li");
        li.innerHTML = 'Name: ' + students[i].fornavn + ' ' + students[i].etternavn;
        unordered.appendChild(li);
      }
    }
  }
})
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...