Есть код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./pages/index.css">
<title>Место</title>
</head>
<body class="page">
<div class="wrapper">
<header class="header">
<img class="header__logo" src="./images/vector/header__logo.svg" alt="Лого">
</header>
<section class="profile">
<img class="profile__avatar" src="./images/jpg/kysto.jpg" alt="Кусто">
<article class="profile__info">
<div class="profile__heading">
<h1 class="profile__name">Жак-Ив Кусто</h1>
<button type="button" class="profile__edit-button"></button>
</div>
<p class="profile__subtitle">Исследователь океана</p>
</article>
<button type="button" class="profile__add-button"></button>
</section>
<section class="elements">
</section>
<footer class="footer">
<h2 class="footer__copyright">© 2020 Mesto Russia</h2>
</footer>
</div>
<div class="popup">
<div class="menu">
<button class="menu__close-icon" type="button"></button>
<h2 class="menu__title">Редактировать профиль</h2>
<form class="form" name="formMenu">
<input type="text" name="menuName" value="Жак-Ив Кусто" class="form__input form__input_type_name">
<input type="text" name="menuSubtitle" value="Исследователь океана"
class="form__input form__input_type_job">
<button type="submit" class="menu__button">
Сохранить
</button>
</form>
</div>
</div>
<div class="popup-cards ">
<div class="menu-cards menu">
<button class="menu__close-icon menu__card-close" type="button"></button>
<h2 class="menu__title menu__title-cards">Новое место</h2>
<form class="form" name="formMenu">
<input type="text" name="cardName" placeholder="Название" class="form__input form__input_type_text">
<input type="link" name="link" placeholder="Ссылка на картинку"
class="form__input form__input_type_link">
<input type="button" class="menu__button card_create" value="Создать">
</input>
</form>
</div>
</div>
<template class = "card-template">
<div class="card">
<button class="card__button-delete" type="button"></button>
<img src="" alt="" class="card__image">
<div class="card__description">
<h2 class="card__title"></h2>
<button class="card__button-like" type="button"></button>
</div>
</div>
</template>
<script src="./scripts/script.js"></script>
</body>
</html>
const page = document.querySelector('.page');
const wrapper = page.querySelector('.wrapper');
const editButton = wrapper.querySelector('.profile__edit-button');
const menu = document.querySelector('.menu');
const saveButton = menu.querySelector('.menu__button');
const closeButton = menu.querySelector('.menu__close-icon');
const popup = page.querySelector('.popup');
const like = document.querySelector('.card__button-like');
const textName = document.querySelector('.form__input_type_name');
const textSubtitle = document.querySelector('.form__input_type_job');
const profileNameText = document.querySelector('.profile__name');
const profileSubtitleText = document.querySelector('.profile__subtitle');
const formElement = popup.querySelector('.form');
const popupCards = document.querySelector('.popup-cards');
const addButton = document.querySelector(".profile__add-button");
const closeCardsButton = document.querySelector('.menu__card-close');
const initialCards = [
{
name: 'Архыз',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
},
{
name: 'Челябинская область',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg'
},
{
name: 'Иваново',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg'
},
{
name: 'Камчатка',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg'
},
{
name: 'Холмогорский район',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg'
},
{
name: 'Байкал',
link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg'
}
];
const container = document.querySelector ('.elements')
const cardTemplate = document.querySelector ('.card-template').content
const formButton = document.querySelector ('.card_create')
function render() {
initialCards.forEach(renderItem);
}
// функция рендеренга
function renderItem (name){
const newCard = cardTemplate.cloneNode(true) //Клоним кароточку
const cardTitle = newCard.querySelector ('.card__title')
const cardImage = newCard.querySelector ('.card__image')
// вставляем в DOM
container.append(newCard);
cardTitle.textContent = 'апхыз'
}
renderItem()
render()
function openEditProfilePopup() {
popup.classList.add('popup_active');
textName.value = profileNameText.textContent;
textSubtitle.value = profileSubtitleText.textContent;
}
function openEditCardsPopup() {
popupCards.classList.add('popup-cards_active');
}
function closeEditProfilePopup() {
popup.classList.remove('popup_active');
}
function closeEditCardsPopup() {
popupCards.classList.remove('popup-cards_active');
}
function formSubmitHandler(evt) {
evt.preventDefault();
profileNameText.textContent = textName.value;
profileSubtitleText.textContent = textSubtitle.value;
closeEditProfilePopup();
}
closeCardsButton.addEventListener('click', closeEditCardsPopup)
closeButton.addEventListener('click', closeEditProfilePopup);
editButton.addEventListener('click', openEditProfilePopup);
formElement.addEventListener('submit', formSubmitHandler);
addButton.addEventListener('click', openEditCardsPopup);
Дан массив из объектов. А так же темплейт. Карточки появляются, но их почему то 7, а не 6. Так же не получается получить значение name и link из массива и сделать так, что бы каждое значение было для каждой карточки. Card__image должно принять значение ссылки, а card title значение name. Всем спасибо
Простой
