В чем ошибка js, я не понимаю? Нужно переключить карточки с плиток на список и наоборот.

HTML
<header>
<h2>Аренда яхты</h2>
<ul class="card-view-buttons">
<li class="card-view-item">
<button class="card-view-button-grid active" type="button"></button>
</li>
<li class="card-view-item">
<button class="card-view-button-list" type="button"></button>
</li>
</ul>
</header>
<ul class="cards">
<li class="card">
<img class="card-img" src="img/photo-card-1.jpg" width="310" height="141" alt="Белая двухпалубная яхта">
<div class="card-content">
<h3 class="card-title">Катер Meridian 401</h3>
<p class="card-description">Яхта 401 длиной 12.5 метров и шириной 4.2 метра, вместимостью 11 человек</p>
<ul class="card-features">
<li>2 каюты</li>
<li>4 спальных места</li>
<li>аудиосистема, кондиционер</li>
<li>холодильник, микроволновка</li>
<li>душ, туалет</li>
</ul>
</div>
<p class="card-price">
<span class="card-price-name">Цена:</span>
<span class="card-price-value">14 000 ₽/час</span>
</p>
</li>
остальные аналогично,не стал копировать

JS

let tileViewButton = document.querySelector('.card-view-button-grid');
let standardViewButton = document.querySelector('.card-view-button-list');
let cardsList = document.querySelector('.cards');

standardViewButton.onclick = function () {
cardsList.classList.add('standard');
tileViewButton.classList.remove('active');
standardViewButton.classList.add('active');
};

tileViewButton.onclick = function () {
cardsList.classList.remove('standard');
standardViewButton.classList.remove('active');
tileViewButton.classList.add('active');
};