Hi i am using Javascript to Call a API for Pricefeed from Coingecko. I use a Function to add Div's from a button for choosing Coins that will display Prices in different "spaces".
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>
i call the Function fetch_coinlist() before the closing Body Tag
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);
}
}
When i use the selector on its own with a static ID it works and i get the Price Displayed from the Coin i choose, in the example above it gives me the right Values to the Console but when i try to run the loop it gets aborted after the first cycle with the error: Uncaught TypeError: Cannot read property 'appendChild' of null
I tryed to put the script at the End of the Site so everything can load, but it does not change the Error, i tryed with static ID this works but i need to have as many selections as the User wants to add, i tryed to put selector Actions outside the loop but it did not work either. When i use console.log(toplist) before ...appendChild(toplist) it gives me the correct option i try to append,
<option value="bitcoin">BTC - Bitcoin</option>
but the loop stops with the Error: Uncaught TypeError: Cannot read property 'appendChild' of null, what am i doing wrong?
