JavaScript . Кнопка "Показать ещё"
Не получается реализовать кнопку "Показать ещё" на JS При нажатии на кнопку "Подгрузить больше" - ничего не происходит. По задумке при нажатии на кнопку "Подгрузить больше" должны внизу появиться ещё 4 карточки , если нажать ещё раз на кнопку то ещё 4 карточки. Тыкните носом пожалуйста , что сделал нет так и как сделать что бы заработало. Заранее спасибо!!! :D
const showMore = document.querySelector('#show-more');
const news = document.querySelectorAll('.card').length;
let items = 4
showMore.addEventListener('click', () => {
items += 4;
const array = Array.from(document.querySelector('.articles').children);
const visItems = array.slice(0, items);
visItems.forEach(eL => eL.classList.add('.is-visible'));
});body {
background: #f1f1f1!important;
}
header {
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 3px 0 rgba(74,74,74,.21);
}
header div .logo {
width: 80px;
height: 80px;
border-radius: 50%;
display: inline-block;
border: 2px solid #a2252d;
transition: all 0.6s ease-in-out;
}
header div .logo:hover {
cursor: pointer;
transform: rotate(360deg);
}
header span.logo_text {
font-size: 1.8em;
margin-left: 10px;
line-height: 100%;
font-family: 'Suez One',sans-serif;
display: inline-block;
position: relative;
top: 18px;
}
header span.logo_text small {
font-size: 0.8em;
display: block;
color: #9c3737;
}
header .navigation {
margin-top: 25px;
}
#search {
margin-top: 25px;
}
header .btn {
border: 1px solid silver;
}
.jumbotron {
background-color: #9a2f2d!important;
border: 2px solid #5f1012;
margin-bottom: 50px;
}
.articles h3 {
font-size: 2em;
color: #404040;
}
.card {
width: 45%;
margin-bottom: 30px;
margin-right: 5%;
float: left;
}
.blog-footer {
width: 100%;
text-align: center;
margin-top: 70px;
background: #f9f9f9;
border: 2px solid #e5e5e5;
border-bottom: 0;
border-radius: 12px 12px 0px 0px;
padding: 30px 0;
}
.btn-center {
grid-column: 1 / 2 span;
text-align: center;
}
.card:nth-child(n + 6) {
display: none;
}
.card.is-visible {
display: block;
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Веб блог</title>
<link href="css/main.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
<header class="container p-3 mt-5">
<div class="row">
<div class="col-4">
<img src="img/logo.png" class="logo" alt="Лого сайта">
<span class="logo_text">Test----1 <small>Test2</small></span>
</div>
<div class="col-3 offset-1 text-right">
<input type="search" id="search" class="form-control" placeholder="Поиск">
</div>
<div class="col-4 navigation text-right">
<a href="index.html"><button type="button" class="btn btn-light">Главная</button></a>
<button type="button" class="btn btn-light">Статьи</button>
<button type="button" class="btn btn-light">Контакты</button>
</div>
</div>
</header>
<div style="background: #9a2f2d!important;" class="jumbotron container mt-5 p-3 p-md-5 text-white rounded bg-dark">
<div class="row">
<div class="col-md-6 px-0">
<h1 class="display-4">3 основные сферы применения языка Python</h1>
<p class="lead my-3">До начала активного изучения любого языка программирования правильно было бы задуматься о сферах его применения. Мы расскажем про 3 самые популярные сферы применения языка Python.</p>
<p class="lead mb-0"><a href="#"><button class="btn btn-danger">Читать далее</button></a></p>
</div>
<div class="col-md-6">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="img-thumbnail">
</div>
</div>
</div>
<div class="container">
<div class="row articles">
<div class="col-8">
<h3>Новости</h3>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Сравнение движков: Unreal Engine 4 против Unity 5</h5>
<p class="card-text">Выбрать движок дело не простое, а особенно когда оба очень хороши. В статье мы проведем сравнение двух программ и выясним какой движок использовать именно Вам!</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">7 девушек айтишниц из фильмов и сериалов</h5>
<p class="card-text">Много ли вы знаете фильмов и сериалов, где главные персонажы это девушки программисты? Мы подобрали 7 фильмов с такой концепцией.</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">11 полезных инструментов для веб-разработчика</h5>
<p class="card-text">Разработчики постоянно пытаются сделать свою жизнь проще или расширить собственные возможности. Мы подготовили 11 инструментов, которые это обеспечат.</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Что такое Deep Learning? Как работает глубокое обучение?</h5>
<p class="card-text">Как работает глубокое обучение и что оно из себя представляет? В ходе статьи мы расскажем про Deep Learning и разберемся с его ключевыми понятиями.</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Сравнение движков: Unreal Engine 4 против Unity 5</h5>
<p class="card-text">Выбрать движок дело не простое, а особенно когда оба очень хороши. В статье мы проведем сравнение двух программ и выясним какой движок использовать именно Вам!</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">7 девушек айтишниц из фильмов и сериалов</h5>
<p class="card-text">Много ли вы знаете фильмов и сериалов, где главные персонажы это девушки программисты? Мы подобрали 7 фильмов с такой концепцией.</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">11 полезных инструментов для веб-разработчика</h5>
<p class="card-text">Разработчики постоянно пытаются сделать свою жизнь проще или расширить собственные возможности. Мы подготовили 11 инструментов, которые это обеспечат.</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Что такое Deep Learning? Как работает глубокое обучение?</h5>
<p class="card-text">Как работает глубокое обучение и что оно из себя представляет? В ходе статьи мы расскажем про Deep Learning и разберемся с его ключевыми понятиями.</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Сравнение движков: Unreal Engine 4 против Unity 5</h5>
<p class="card-text">Выбрать движок дело не простое, а особенно когда оба очень хороши. В статье мы проведем сравнение двух программ и выясним какой движок использовать именно Вам!</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">7 девушек айтишниц из фильмов и сериалов</h5>
<p class="card-text">Много ли вы знаете фильмов и сериалов, где главные персонажы это девушки программисты? Мы подобрали 7 фильмов с такой концепцией.</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">11 полезных инструментов для веб-разработчика</h5>
<p class="card-text">Разработчики постоянно пытаются сделать свою жизнь проще или расширить собственные возможности. Мы подготовили 11 инструментов, которые это обеспечат.</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="card">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Что такое Deep Learning? Как работает глубокое обучение?</h5>
<p class="card-text">Как работает глубокое обучение и что оно из себя представляет? В ходе статьи мы расскажем про Deep Learning и разберемся с его ключевыми понятиями.</p>
<a href="#" class="btn btn-warning">Читать далее</a>
</div>
</div>
<div class="btn-center">
<button type="button" class="btn btn-danger" id="show-more">Подгрузить больше</button>
</div>
</div>
<div class="col-4">
<h3>Анонсы</h3>
<div class="p-3 mb-3 bg-light text-dark rounded">
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
</div>
<div class="p-3 mb-3 bg-info text-light rounded">
<img src="https://erudyt.net/wp-content/uploads/2020/09/recursosprogramadores.png" class="img-thumbnail">
<br><br>
<p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<button type="button" class="btn btn-light">Читать далее</button>
</div>
</div>
</div>
</div>
<footer class="blog-footer container">
<b>Все права защищены ©</b>
</footer>
<script src="js/show-more.js"></script>
</body>
</html>
Источник: Stack Overflow на русском