Question

const endpoint = 'http://api.fixer.io/latest';


var currencies =['EUR','USD','AUD','BGN','BRL','CAD','CHF','CNY','CZK','DKK','GBP','HKD','HRK','HUF','IDR','ILS','INR','JPY','KRW','MXN','MYR','NOK','NZD','PHP','PLN','RON','RUB','SEK','SGD','THB','TRY','ZAR'];

var cur = document.getElementById('CurrencyList');
var fragment = document.createDocumentFragment();
currencies.forEach(function(currency, index){
    var opt = document.createElement('option');
    opt.innerHTML = currency;
    opt.value = currency;
    fragment.appendChild(opt);

});

cur.appendChild(fragment);

var cur2 = document.getElementById('CurrencyList2');
var fragment = document.createDocumentFragment();
currencies.forEach(function(currency, index){
    var opt = document.createElement('option');
    opt.innerHTML = currency;
    opt.value = currency;
    fragment.appendChild(opt);

});

cur2.appendChild(fragment);

        currencies = document.querySelectorAll('.my-selector');
        Array.from(currencies).forEach(function(el) {
        console.log(el);
});


        function moneyConvert(){

                fetch(endpoint) 
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    const Amount = data.rates.$id;
                    console.log(Amount);
                    const first = currencies.value;
                    console.log(first);
                    const second = (first * Amount).toFixed(2);
                    currencies.value = second;

           });
        }

        document.querySelector(".convertButton").addEventListener("click", moneyConvert);
        currencies.addEventListener("input", moneyConvert);

我正在学习JavaScript，但我选择了一个有点困难的项目货币兑换我需要从该URL中选择html中的货币数组字符串。我知道这可能看起来很奇怪，但我认为从建立你学习。我从上面的数组中选择和选项，从第一个和第二个输入选择器中进行选择。现在我需要从API链接到字符串，并将该字符串链接到输入。如果这一切都错了，请给我指导如何解决问题。

<!DOCTYPE html>
<html>
<head>
    <title>Currency App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>



    <div class="container">
        <h1>Currency Conversion </h1>
        <p>Enter your amount in Euro to see how much it is Pounds</p>
        <div class="conversionWrapper">
            <div class="inputWrapper">
                <select id="CurrencyList"></select>
                <input type="number" name="my-selector'" class="my-selector'" placeholder="0.00" step="0.01" />
            </div><!-- .inputWrapper -->
            <div class="inputWrapper">
                <p>TO</p>
                <select id="CurrencyList2"></select>
                <input type="number" name="my-selector'" class="my-selector'" placeholder="0.00" step="0.01" disabled />
            </div><!-- .inputWrapper -->
            <button class="convertButton">Convert</button>
        </div><!-- .conversionWrapper -->
    </div><!-- .container -->




            <!-- Other Controllers/ Modules / Factories -->
    <script src="app.js"></script>
</body>
</html>

This is the image screenshot 这是我需要将选择器链接到输入

的两个输入和两个选择器

如何使我的querySelector从数组到链选择HTML选项

0 个答案: