Пытаюсь вывести новый список объектов на страницу (обновить html), когда ввожу новые значения в инпуты и кликаю кнопку на странице по-прежнему отображаются объекты с введенными первый раз значениями. Дебажила код, ошибок нет. Буду благодарна любой помощи.
Данные для инпутов:
campaignType = 'NEW';
utility = 'ComEdEle.Tara';
vendor = 'JEMSCI;UnitedEnergyServices'
Для отображения нового списка:
campaignType = 'NEW';
utility = 'NICOR';
vendor = 'JEMobile'
const url = 'https://raw.githubusercontent.com/EvgeniyaP/Products-json/master/products.json';
const elem = document.getElementById('products');
const campaignType = document.getElementById('campaignType');
const utility = document.getElementById('utility');
const vendor = document.getElementById('vendor');
const sendBtn = document.getElementById('sendBtn');
sendBtn.addEventListener('click', () => {
getJSONProducts();
});
const getJSONProducts = () => {
fetch(url)
.then(response => {
if (response.ok) {
return response.json()
}
throw new Error('Request failed!')
}, networkError => {
console.log(networkError.message)
})
.then((array) => {
array.forEach((obj) => {
const {
CampaignOfferTypeID,
UtilityCo,
CpiAuxiliary1
} = obj;
if (CampaignOfferTypeID === campaignType.value && UtilityCo === utility.value && CpiAuxiliary1 === vendor.value) {
elem.innerHTML += `<div style="color: red; margin-top: 10px; font-weight: 700; font-size: 18px;">Product</div>`
for (prop in obj) {
elem.innerHTML += `<div>${prop}:${obj[prop]}</div>`
}
}
})
})
};
<div id="wrapper">
<input id="campaignType" type="text">
<input id="utility" type="text">
<input id="vendor" type="text">
<button id="sendBtn">SEND</button>
</div>
<p id="products"></p>