Почему не работает кнопка показать ещё?

Question

[Даниил Архипов]

На данной странице Ссылка удалена модератором. по какой то причине не работает кнопка "show 10", может где то не так написан js, я ещё новичок и не всё знаю, но тут голову сломал уже
Вот сам исходный код шаблона:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
<div class="certificates-items ">
	<?foreach($arResult["ITEMS"] as $arItem):?>
		<?
			$this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
			$this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
		?>
		<div class="certificates-item" id="<?=$this->GetEditAreaId($arItem['ID']);?>">
			<a href="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" class="certificates-item__a" data-fancybox="gallery" data-caption="<? echo $arItem['NAME']?>" >
				<img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?echo $arItem["NAME"]?>" alt="Сертификаты" class="certificates-item__img">
			</a>
			<p><?=$arItem["NAME"]?></p>
		</div>
	<?endforeach;?>
</div>
	<button id="button">Show 10</button>
<script>
window.onload = function () {
        var box=document.getElementsByClassName('certificates-item');
        var btn=document.getElementById('button');
        for (let i=10;i<box.length;i++) {
            box[i].style.display = "none";
        }

        var countD = 10;
        btn.addEventListener("click", function() {
            var box=document.getElementsByClassName('certificates-item');
            countD += 10;
            if (countD <= box.length){
                for(let i=0;i<countD;i++){
                    box[i].style.display = "block";
                }
            }

        })
    }
    </script>

Comments

[Stockholm Syndrome]

при первом нажатии на кнопку переменная countD будет равна уже 20, хотя блоков 19 всего, вот ничего и не работает

Answer 1

[edoobix]

var box=document.getElementsByClassName('certificates-item');
        var btn=document.getElementById('button');
        for (let i=10;i<box.length;i++) {
            box[i].style.display = "none";
        }

        var countD = 10;
        btn.addEventListener("click", function() {
            var box=document.getElementsByClassName('certificates-item');
            countD += 10;
            if (box.length <= countD){
                for(let i=0;i<countD;i++){
                    if(box[i]){
                      box[i].style.display = "block";
                    }
                }
            }
        })