Как сделать мой querySelector из массива в цепочку с параметрами выбора HTML
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>
Это скриншот изображения. Это два входа и два селектора, которые мне нужны, чтобы связать селектор для ввода