Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/435.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
在Javascript中单击单选按钮时使用addeventlistener添加内容_Javascript_Json_Radio Button_Addeventlistener - Fatal编程技术网

在Javascript中单击单选按钮时使用addeventlistener添加内容

在Javascript中单击单选按钮时使用addeventlistener添加内容,javascript,json,radio-button,addeventlistener,Javascript,Json,Radio Button,Addeventlistener,我是一所大学的新生。我被指派使用addEventListener。问题是我以前没用过 这个任务是,我有一个json文件,其中有一个学生姓名列表。我的第一个练习是列出所有学生的名单。我做到了。但接下来是困难的部分,我找不到一个可能的解决方案,当我只需要展示某个课程的学生时。每个程序都有单选按钮,单击时需要显示程序成员列表。还有一个单选按钮,上面写着“全部”,需要选择所有的学生 这是我的javascript文件: .then((response) => { return respo

我是一所大学的新生。我被指派使用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);
  }
});

const radButtons=document.getElementsByName('programvelger'),studenter=document.querySelector('.studenter');对于(让i=0,l=radButtons.length;我尝试了您的解决方案,但当我单击单选按钮时得到的只是字符串“on”。哦,是的,给您单选输入一个值。我尝试了以下方法:var BIGEOMAT=document.getElementById。(“BIGEOMAT”).value,但它不起作用。不,这只是将值赋给一个var,它将是
'
,因为您从来没有将值赋给元素。您希望将值赋给HTML
或您通过JavaScript获得的元素。
  <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>
{
  "fornavn": "Marcus Gimse",
  "etternavn": "Blikstad",
  "studieprogram": "Bachelor in Engineering, Geomatics",
  "forkortelse": "BIGEOMAT"
},