Неработающее очищение блока
Есть код
let ending = '';
if ((data.result.countrecords % 100 > 10) && (data.result.countrecords % 100 < 20)) {
ending = 'ов';
} else {
switch (data.result.countrecords % 10) {
case 0:
case 5:
case 6:
case 7:
case 8:
case 9:
ending = 'ов';
break;
case 1:
ending = '';
break;
case 2:
case 3:
case 4:
ending = 'а';
break;
}
}
let centeroutput = '<div id=\"topcenterarea\">' + '<h1>' + data.result.header + ' ' + '<span id=\"goodscount\">' + data.result.countrecords + ' товар' + ending + '</span>' + '</h1>' + '</div>';
console.log(centeroutput);
let productcardsoutput = '';
for (let i = 0; i < data.result.countrecords; i++) {
let productcardobject = {};
productcardobject["imagepath"] = data.output[i]['imagepath'];
console.log('Путь к рисунку ' + productcardobject["imagepath"]);
productcardobject["monoblockname"] = data.output[i]['monoblockname'];
productcardobject["color"] = data.output[i]['color'];
productcardobject["Диагональ"] = data.output[i]['screendiagonal'];
productcardobject["разрешение"] = data.output[i]['resolution'];
productcardobject["Тип процессора"] = data.output[i]['cputype'];
productcardobject["Частота процессора"] = data.output[i]['frequency'];
productcardobject["Оперативная память (RAM)"] = data.output[i]['ramsize'];
productcardobject["Графический контроллер"] = data.output[i]['videocard'];
if (data.output[i]['memorytype'] == 'SSD') {
productcardobject["Объем SSD"] = data.output[i]['sizememorydata'];
checkMemory = 'SSD';
} else if (data.output[i]['memorytype'] == 'HDD') {
productcardobject["Объем HDD"] = data.output[i]['sizememorydata'];
checkMemory = 'HDD';
};
productcardobject["GoodsPrice"] = data.output[i]['price'];
productcarditems[i] = productcardobject;
console.log('productcarditems[i]');
console.log(productcarditems[i]);
/*
console.log('After productcarditems[i]');
console.log(productcardobject);
*/
}
console.log('productcarditems output');
console.log(productcarditems);
let pagination = document.querySelector('#pagination');
let notesOnPage = 15;
let countOfItems = Math.ceil(productcarditems.length / notesOnPage);
console.log(countOfItems);
let showPage = (function() {
let active;
console.log('Inside showPage');
return function(item) {
if (active) {
active.classList.remove('active');
}
active = item;
item.classList.add('active');
let pageNum = +item.innerHTML;
let start = (pageNum - 1) * notesOnPage;
console.log(start);
let end;
if (productcarditems.length - start >= notesOnPage) {
end = start + notesOnPage;
} else {
end = productcarditems.length;
}
console.log(end);
let notes = productcarditems.slice(start, end);
console.log(notes);
$('.centerarea').innerHTML = '';
let k = 0;
for (let note of notes) {
console.log(note['monoblockname']);
RenderProductCard(note, k);
console.log('Render note');
console.log(note);
console.log('Before centeroutput');
centeroutput += productcardsoutput;
//console.log(centeroutput);
k += 1;
console.log('k=' + String(k));
}
$('.centerarea').html(centeroutput);
};
}());
let items = [];
for (let j = 1; j <= countOfItems; j++) {
let li = document.createElement('li');
li.innerHTML = j;
pagination.appendChild(li);
items.push(li);
}
showPage(items[0]);
for (let item of items) {
item.addEventListener('click', function() {
showPage(this);
});
}
function RenderProductCard(productcardobj, i) {
console.log('Inside render');
productcard = '<div class="ProductCardBlock" id=\"ProductCardBlock' + String(i) + '\">';
productcard += '<div class="dynamic ProductImage">';
productcard += '<div id="ImageWrapper">';
productcard += '<img class="ProductPicture" src=' + '"../images/' + productcardobj['imagepath'] + '">';
productcard += '</div>';
productcard += '</div>';
productcard += '<div class="dynamic ProductDescription">';
productcard += '<div class="ProductName">' + productcardobj['monoblockname'] + ', ' + productcardobj['color'] + '</div>';
productcard += '<div class="ProductScreenParamsWrapper">' + '<span class="text">' + 'Диагональ/разрешение ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductScreenParams">' + ' ' + productcardobj["Диагональ"] + '/' + productcardobj["разрешение"] + 'пикс.' + '</span>' + '</div>';
productcard += '<div class="ProductCpuTypeWrapper">' + '<span class="text">' + 'Тип процессора ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductCpuType">' + ' ' + productcardobj["Тип процессора"] + '</span>' + '</div>';
productcard += '<div class="ProductCpuFrequencyWrapper">' + '<span class="text">' + 'Частота процессора ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductCpuFrequency">' + ' ' + productcardobj["Частота процессора"] + '</span>' + '</div>';
productcard += '<div class="ProductRAMWrapper">' + '<span class="text">' + 'Оперативная память (RAM) ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductRAM">' + ' ' + productcardobj["Оперативная память (RAM)"] + '</span>' + '</div>';
productcard += '<div class="ProductVideoCardWrapper">' + '<span class="text">' + 'Графический контроллер ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductVideoCard">' + ' ' + productcardobj["Графический контроллер"] + '</span>' + '</div>';
if (checkMemory == 'SSD') {
productcard += '<div class="ProductDisksAndDrivesWrapper">' + '<span class="text">' + 'Объем SSD ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductDisksAndDrives">' + ' ' +
productcardobj["Объем SSD"] + '</span>' + '</div>';
} else if (checkMemory == 'HDD') {
productcard += '<div class="ProductDisksAndDrivesWrapper">' + '<span class="text">' + 'Объем HDD ' + '</span>' + '<span class="spaces">' + '' + '</span>' + '<span class="ProductDisksAndDrives">' + ' ' + productcardobj["Объем HDD"] + '</span>' + '</div>';
};
productcard += '</div>';
productcard += '<div class="dynamic ProductBuyPart">' + '<div class="GoodsPrice">' +
productcardobj["GoodsPrice"] + ' ' + '₽' + '</div>' + '<button type="submit" class="ProductAddToBasket" value="В корзину">Купить</button>' + '</div>';
productcard += '</div>';
productcardsoutput += productcard;
}
/*
console.log('Before centeroutput');
centeroutput+=productcardsoutput;
centeroutput+='<ul id="pagination"></ul>';
console.log(centeroutput);
$('.centerarea').html(centeroutput);
*/
}
}
)
}
)
/*);*/
Он читает из базы данных (data.output[i]) и записывает в массив productcarditems объекты productcardobject (карточки товаров) (в остальном пример похож как на http://code.mu/ru/javascript/video/lesson/implementation-of-pagination-in-javascript/). При щелчке на кнопке пагинации (№2) вместо очищения экрана
$('.centerarea').innerHTML='';
на экран выводятся нестертые 15 элементов и еще 2 элемента (должно вывести просто 2 элемента). Почему не срабатывает очищение блока с классом .centerarea.