Конвертер валют через JSON

Question

 <label for="conv">YOU PRICE</label>
<select  id="conv"></select>





      <h1>Спец предложение</h1>
      <div style="margin-top: 30px;height: auto;text-align: center;" id="tovary">

      </div>


function FunctionName(){
    alert('buy')
}



    $.getJSON('js/tovary.json', function(data) {

            for(var i=0;i<data.tovar.length;i++){
                $('#tovary').append('<div><h1>' + data.tovar[i].name 
                + '</h1>' + '<img src='+ data.tovar[i].image + '>'+'<p>' 
                + data.tovar[i].price + 
                '</p>' 
                +'<button>BUY</button>'+'</div>' );
                $('button').addClass('butt');
                $('button').attr('onClick' , 'FunctionName();');
                $('p').attr('id' , 'price') ;        

            } 
    });




 $.getJSON('https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5' , function(data1) {
     for(var i=0;i<data1.length;i++){
        $('#conv').append('<option>' + data1[i].ccy + '</option>')

     }})




     $.getJSON('https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5' , function(data2) {
        let x = document.getElementById("conv");
         let y = x.options[x.selectedIndex];
         let z = document.getElementById("price");
         let currencyInfo = null;
         for (let i = 0; i < data2.length; i++) {
           if (data2[i].ccy === y) {
                currencyInfo = data2[i] ;
               break;
           }

            z.innerHTML = data2[i].buy 




         } })

{
    "tovar": [{
        "name" : "tov1",
        "price": 1,
        "image" : "../img/tsh1.jpg"
    }, {
        "name" : "tov2",
        "price": 78.99,

        "image" : "../img/tsh2.jpg"
    }, {
        "name" : "tov3",
        "price": 27.50,

        "image" : "../img/Tsh3jpg.jpg"
    }]

Почему выводит только последнее значение .buy ???

Answer 1

Потому что getElementById ищет только первый элемент с подобным id.
Если хотите, чтобы выводилось для каждого товара buy, то Вам необходимо задать класс тегу p, а не id.
Сделать это Вы можете через $('p').addClass('Pclass');
Далее замените эту часть:


$.getJSON('https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5' , function(data2) {
let x = document.getElementById("conv");
let y = x.options[x.selectedIndex];
let z = document.getElementsByClassName("Pclass"); //Ищем по классу. Так найдёт все элементы, а не только первый.
let currencyInfo = null;
for (let i = 0; i < data2.length; i++) { //Если у Вас индекс в data совпадает с buy
if (data2[i].ccy === y) {
currencyInfo = data2[i] ;
break;
}

z[i].innerHTML = data2[i].buy // Для каждого элемента с индексом i добавляем значение из data2[i].buy
} });

Изменение курса валют:

    $.getJSON('https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5' , function(data2) {
        let x = document.getElementById("conv");
        let y = x.selectedIndex;
        let z = document.getElementsByClassName("Pclass");
        let currencyInfo = null;
        for (let i = 0; i < data2.length; i++) {
            if (data2[i].ccy === y) {
                currencyInfo = data2[i] ;
                break;
            }

        }
        for (let z1=0;z1<z.length;z1++){ // Изначально проходим по всем элементам с классом `Pclass`
            z[z1].innerText = z[z1].innerText * data2[y];// Проставляем сумму умноженную на курс по индексу y
        }
        x.onchange = function () { // Отслеживаем изменение валюты
            let y = x.selectedIndex; // Получаем индекс валюты
            for (let i1=0;i1<z.length;i1++){ // Перебираем поля
                z[i1].innerText = z[i1].innerText * data2[y]; // Для каждого поля проставляем значение цены умноженную на курс валют 
            }
        }
    }
    });

БЛОГ НА HUSL

Конвертер валют через JSON

Ответы (1 шт):