具有自己的事件侦听器的动态查询选择器

问题描述

您好，我正在使用 Javascript 为 Coingecko 的 PriceFeed 调用 API。我使用一个函数从一个按钮中添加 Div，用于选择将在不同“空间”中显示价格的硬币。

HTML：

<button onclick="add_coin('coinspaceA',window.countA); return false;">Add Coin</button>
<button onclick="add_coin('coinspaceB',window.countB); return false;">Add Coin</button>
<button onclick="add_coin('coinspaceC',window.countV); return false;">Add Coin</button>

我在结束正文标签之前调用函数 fetch_coinlist()

JS：

window.countA = 0;
window.countB = 0;
window.countC = 0;

var coins = {};

function fetch_coinlist(){
fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false")
.then(
function(response) {
if (response.status !== 200) {
  alert('Can Not get Price Api! Status: ' +
    response.status);
  return;
}

// examine the text in the response
response.json().then(function(data) {

coins = {};
for (let i = 0,l = data.length; i < l; i++) {
  let {id,...info} = data[i];

  coins[id] = info;
}


});

}
)
.catch(function(err) {
alert('Can Not get Price Api! Status: ' + err);
});
}


function add_coin(space) {

  if (space == "coinspaceA") {

    coinspace(space,window.countA);
  }



  if (space == "coinspaceB") {

    coinspace(space,window.countB);
  }



  if (space == "coinspaceC") {

    coinspace(space,window.countC);

}

}



function coinspace(space,count){



  const div = document.createElement('div');
  count += 1;
  div.id = space + count;


  if (space == "coinspaceA"){
  window.coinspace1 = count;
  }
  if (space == "coinspaceB"){
  window.coinspace2 = count;
  }
  if (space == "coinspaceC"){
  window.coinspace3 = count;
  }

  div.innerHTML = (`

  <input type="button" value="-"  class="curser-del" onclick="remove_coin(this,'` + space + `')"/>

  <select id="` + space + count  + `select" placeholder="Choose Coin"></select>

  <input type="numbers" >

  <label id="` + space + count  + `info">Coins</label>

  `);

  document.getElementById(space).appendChild(div);


  show_coinlist(space,count);


}



function show_coinlist(space,count){



for (let id in coins) {
let item = coins[id];
console.log(item);
const toplist = document.createElement("option");

toplist.value = id;
console.log(toplist.value);

// selector actions
const selector = document.querySelector("#" + space + count + "select");
const info = document.querySelector("#" + space + count + "info");
console.log(selector);
console.log(info);
selector.addEventListener('change',event => {
  info.innerHTML = "Selected item: " + coins[toplist.value].name + " : " + coins[toplist.value].current_price;
});
console.log(coins[toplist.value].name);
console.log(coins[toplist.value].current_price);
toplist.innerHTML = item.symbol.toupperCase() + " - " + item.name;
console.log(toplist.innerHTML);
console.log(toplist);
document.getElementById("#" + space + count + "select").appendChild(toplist);



}
}

当我单独使用带有静态 ID 的选择器时，它可以工作并且我从我选择的硬币中获得显示的价格，在上面的示例中，它为我提供了控制台的正确值，但是当我尝试运行循环时它在第一个循环后中止并出现错误： 未捕获的类型错误：无法读取 null 的属性“appendChild”

我尝试将脚本放在站点的末尾，以便可以加载所有内容，但它不会更改错误，我尝试使用静态 ID 这有效，但我需要有用户想要添加的尽可能多的选择，我试图将选择器操作放在循环之外，但它也不起作用。当我在 ...appendChild(toplist) 之前使用 console.log(toplist) 时，它给了我我尝试追加的正确选项，

<option value="bitcoin">BTC - Bitcoin</option>

但循环因错误而停止：未捕获的类型错误：无法读取 null 的属性 'appendChild'，我做错了什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）