Question

我从API中获取一些数据，我需要在其中获得一只狗品种，并创建一张显示其中一些信息的卡片。我刚开始，我被卡住了。

//Area where data will be displayed
var showcase = document.getElementById('showcase');

var select = document.getElementById('select-bar');

var request = new XMLHttpRequest();

// Get data from API endpoint
request.open('GET', 'https://dog.ceo/api/breeds/list', true);

request.onload = function () {
   var data = JSON.parse(this.response);
   var breeds = data.message;

   if (request.status >= 200 && request.status < 400 ) {
     for (var i = 0; i < breeds.length; i++) {

       var opt = document.createElement('option');
       opt.innerHTML = breeds[i];
       opt.value = breeds[i];
       opt.addEventListener('click', function(){alert('Hey !')})
       select.appendChild(opt);

    }
   }
  }

request.send();

通过点击事件，它不是我正在做的最后一个事件，但我想要了解的一点是，我完全没有把它放在那里的功能。我已经尝试过所有其他元素，这是唯一不起作用的元素。救命？：（

Answer 1

您需要使用select事件向onchange节点添加事件侦听器，而不是为每个选项节点添加事件侦听器。

onchange

select.addEventListener("change", function(event) {
  alert("HELLO");
})

＆＃13;

var showcase = document.getElementById('showcase');

var select = document.getElementById('select-bar');

select.addEventListener("change", function(event) {
  alert("HELLO");
})

var request = new XMLHttpRequest();

// Get data from API endpoint
request.open('GET', 'https://dog.ceo/api/breeds/list', true);

request.onload = function () {
   var data = JSON.parse(this.response);
   var breeds = data.message;

   if (request.status >= 200 && request.status < 400 ) {
     for (var i = 0; i < breeds.length; i++) {

       var opt = document.createElement('option');
       opt.innerHTML = breeds[i];
       opt.value = breeds[i];
       select.appendChild(opt);

    }
   }
  }

request.send();

＆＃13;

<div id="showcase">
  <select id="select-bar">
  </select>
</div>

＆＃13;

无法向Option元素添加功能

1 个答案: