I don't know if you can help me, but I have a problem., I tried to solve it for about 4 hours but it didn't work, I would like, if someone selects a currency from the dropdown list, then will the name and price and logo also changed in the page and shows the info of the currency which was selected in the list
JSON
[
{
"cryptoname": "Cardano",
"price": 2.05,
"img": "https://dynamic-assets.coinbase.com/da39dfe3632bf7a9c26b5aff94fe72bc1a70850bc488e0c4d68ab3cf87ddac277cd1561427b94acb4b3e37479a1f73f1c37ed311c11a742d6edf512672aea7bb/asset_icons/a55046bc53c5de686bf82a2d9d280b006bd8d2aa1f3bbb4eba28f0c69c7597da.png",
"link": "https://www.coinbase.com/de/price/cardano"
},
{
"cryptoname": "VECHAIN",
"price": 0.078,
"img": "https://dynamic-assets.coinbase.com/0ad9feddd1edfda57c5ee772f241bf8a1b5c78c8d90da7acf5281718d67e121f9d8934e6a796cfc9d7693da2e188926b40bba5a25f9802fb2350bb5af2ff2c2c/asset_icons/2163bda6b530aca9b138244a21abf50f87626beb0605fc5fd492d0dc0eb04143.png",
"link": "https://www.coinbase.com/de/price/vechain"
},
{
"cryptoname": "Solana",
"price": 118.37,
"img": "https://dynamic-assets.coinbase.com/d2ba1ad058b9b0eb4de5f0ccbf0e4aecb8d73d3a183dbaeabbec2b6fd77b0a636598e08467a05da7e69f39c65693f627edf7414145ee6c61e01efc831652ca0f/asset_icons/8733712db93f857c04b7c58fb35eafb3be360a183966a1e57a6e22ee5f78c96d.png",
"link": "https://www.coinbase.com/de/price/solana"
},
{
"cryptoname": "Polygon",
"price": 0.96,
"img": "https://dynamic-assets.coinbase.com/085ce26e1eba2ccb210ea85df739a0ca2ef782747e47d618c64e92b168b94512df469956de1b667d93b2aa05ce77947e7bf1b4e0c7276371aa88ef9406036166/asset_icons/57f28803aad363f419a950a5f5b99acfd4fba8b683c01b9450baab43c9fa97ea.png",
"link": "https://www.coinbase.com/de/price/polygon"
},
{
"cryptoname": "Polkadot",
"price": 25.92,
"img": "https://dynamic-assets.coinbase.com/e69bfafd90cc11d33bec57383c354ec1d99f29fdb1a8c3822bf438a58ca6dd032d19e9f5b89fd3dbfb3af45af96610da2f253ad225cd83fcabc3db8e5e52f20d/asset_icons/cb500931800355a865fb919a692a03c346df838e594c408b033f0b91a99cf1ba.png",
"link": "https://www.coinbase.com/de/price/polkadot"
}
]
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="left">
<img src="" alt="" id="icons">
<p id="nk">Währung:<span class="spizial">115</span> </p>
<p id="kp">Preis: <span class="spizial">115</span> </p>
<span class="linken"> <a id="link" href="#" target="blank">Extern Link</a> </span>
</div>
<div class="right">
<h2 > KRYPTOWÄHRUNGEN RECHNER </h2>
<div class="inhalt">
<div name="" id="addselect"></div>
<!-- <select name="" id="selectkrypto" onchange="GetDetails(this.value)"> </select> -->
<label for="" class="paragraf">Wie viel in Euro </label>
<input type="number" name="" id="inputpreis" value="">
</div>
<div class="gesamt" id="gesamt"> </div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
JAVASCRIPT
let show=document.getElementById("show")
let addselect=document.getElementById("addselect");
let krypto_name=document.getElementById("nk");
let krypto_preis=document.getElementById("kp");
let krypto_logo=document.getElementById("icons");
let krypto_link=document.getElementById("link");
let insgesamt=document.getElementById("gesamt");
let inputpreis=document.getElementById("inputpreis");
let xReq=new XMLHttpRequest;
let api="db.json"
xReq.open("GET", api,true);
xReq.onload=function(){
let Datei=JSON.parse(xReq.responseText)
Dateinmapen(Datei)
}
xReq.send()
/* */
function Dateinmapen(datein){
addselect.innerHTML =
` <select name="" id="selectkrypto" onchange="GetDetails( \'${this.value}\')"> ${datein.map(getname=> ` <option value=""> ${getname.cryptoname } </option> ` )} </select>`
datein.map(info=>{
// `<option value=" ${info.cryptoname} {"preis":"${info.price}"} ${info.link} ${info.img} " > ${info.cryptoname} </option>`
krypto_name.innerHTML= info.cryptoname
krypto_preis.innerHTML=info.price
krypto_logo.src=info.img;
krypto_link.setAttribute("href",info.link )
getSelection(info)
inputpreis.addEventListener("keyup",() =>{
// inputpreis.value=3434;
insgesamt.innerHTML= Math.floor(inputpreis.value* info.price)
})
})
}
function GetDetails(ele){
console.log(select.value)
console.log("?name=" select.options)
// krypto_name.innerHTML= select.options[select.selectedIndex].text
krypto_preis.innerHTML= JSON.parse(select.value)
}
CodePudding user response：
const json = [
{
"cryptoname": "Cardano",
"price": 2.05,
"img": "https://dynamic-assets.coinbase.com/da39dfe3632bf7a9c26b5aff94fe72bc1a70850bc488e0c4d68ab3cf87ddac277cd1561427b94acb4b3e37479a1f73f1c37ed311c11a742d6edf512672aea7bb/asset_icons/a55046bc53c5de686bf82a2d9d280b006bd8d2aa1f3bbb4eba28f0c69c7597da.png",
"link": "https://www.coinbase.com/de/price/cardano"
},
{
"cryptoname": "VECHAIN",
"price": 0.078,
"img": "https://dynamic-assets.coinbase.com/0ad9feddd1edfda57c5ee772f241bf8a1b5c78c8d90da7acf5281718d67e121f9d8934e6a796cfc9d7693da2e188926b40bba5a25f9802fb2350bb5af2ff2c2c/asset_icons/2163bda6b530aca9b138244a21abf50f87626beb0605fc5fd492d0dc0eb04143.png",
"link": "https://www.coinbase.com/de/price/vechain"
},
{
"cryptoname": "Solana",
"price": 118.37,
"img": "https://dynamic-assets.coinbase.com/d2ba1ad058b9b0eb4de5f0ccbf0e4aecb8d73d3a183dbaeabbec2b6fd77b0a636598e08467a05da7e69f39c65693f627edf7414145ee6c61e01efc831652ca0f/asset_icons/8733712db93f857c04b7c58fb35eafb3be360a183966a1e57a6e22ee5f78c96d.png",
"link": "https://www.coinbase.com/de/price/solana"
},
{
"cryptoname": "Polygon",
"price": 0.96,
"img": "https://dynamic-assets.coinbase.com/085ce26e1eba2ccb210ea85df739a0ca2ef782747e47d618c64e92b168b94512df469956de1b667d93b2aa05ce77947e7bf1b4e0c7276371aa88ef9406036166/asset_icons/57f28803aad363f419a950a5f5b99acfd4fba8b683c01b9450baab43c9fa97ea.png",
"link": "https://www.coinbase.com/de/price/polygon"
},
{
"cryptoname": "Polkadot",
"price": 25.92,
"img": "https://dynamic-assets.coinbase.com/e69bfafd90cc11d33bec57383c354ec1d99f29fdb1a8c3822bf438a58ca6dd032d19e9f5b89fd3dbfb3af45af96610da2f253ad225cd83fcabc3db8e5e52f20d/asset_icons/cb500931800355a865fb919a692a03c346df838e594c408b033f0b91a99cf1ba.png",
"link": "https://www.coinbase.com/de/price/polkadot"
}
];
//console.log(json);
let nameOptions = json.map(c => c.cryptoname).map(c => `<option value='${c}'>${c}</option>`).join('');
namesOptions = `<option disabled selected>select cryptoname</option>` nameOptions;
document.getElementById('selectkrypto').innerHTML = namesOptions;
const krypto_link=document.getElementById("link");
const priceDoc=document.getElementById("price");
const krypto_logo=document.getElementById("icons");
const curr=document.getElementById("curr");
function GetDetails(val){
const currencyDetails = json.find(c => c.cryptoname === val);
if(currencyDetails){
const {price, img, link} = currencyDetails;
krypto_logo.src = img;
krypto_link.href = link;
priceDoc.textContent = price;
curr.textContent = val;
}
}<select name="" id="selectkrypto" onchange="GetDetails(this.value)">
</select>
<img src="" alt="" id="icons">
<p id="nk">Währung:<span id="curr" class="spizial"></span> </p>
<p id="kp">Preis: <span id="price" class="spizial"></span> </p>
<span class="linken"> <a id="link" href="#" target="blank">Extern Link</a> </span>Use polyfill for find to work in IE
if (!Array.prototype.find) {
Array.prototype.find = function(predicate) {
if (this == null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;
for (var i = 0; i < length; i ) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return value;
}
}
return undefined;
};
}