Пожалуйста, дайте мне знать, если это относится к другой теме.
У меня есть проект с участием карточек пользователей.
Цель: 1. добавить возможность ввода комментариев / тега в предоставленныйввод текста для каждой карточки пользователя.2. сохранить введенные комментарии / тег с помощью localStorage JavaScript.3. сохраненные комментарии / тег для отображения на карточке пользователя, где были введены комментарии / тег.например.3 карточки пользователя, комментарии / тег введены только на карточках 1 и 3, комментарии / теги загрузки должны отображаться только на карточках 1 и 3, а на карточке 2 будет отображаться заполнитель или пробел.
Проблема: если я введу комментарий/ тег на карточке 1, при загрузке он отображается, как и ожидалось, на карточке 1.
, когда комментарии / теги вводятся на карточках 2 или 3, комментарии / отметка при загрузке отображаются только на карточке 1, на карточке, где комментарии / ничего нетбыли введены теги.
Я забыл что-то, когда я делаю для каждого (или я неправильно все это использую)Цени любую помощь / руководство, извините, я новичок в JavaScript.
** предпочитаю простые примеры кода JavaScript, если это возможно.
Мой код ссылается на CodePen - https://codepen.io/marcusnapoleon/pen/GRKzpeE
//SAVE
function saveTag(event) {
var tagTerm = event.target.value;
var tagTextInput = document.querySelectorAll("p.tagFilter");
tagTextInput.forEach(function (cardTags) {
localStorage.setItem("tag", tagTerm)
});
}
//RETRIEVE
function show(event) {
tagTextInput = document.querySelectorAll("p.tagFilter");
tagTextInput.forEach(function (getTags) {
var y = localStorage.getItem("tag");
document.getElementById("name").innerHTML = y
});
}
.card{
width: 300px;
border: 1px solid lightgrey;
padding: 5px 20px;
}
.container{
width: 60%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-evenly;
padding: 100px 250px;
font-size: 1.2rem;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="show()">
<div class="container">
<div class="card">
<h2>Name : User One</h2>
<h2>Title : Job One</h2>
Enter your name: <input id="tagInput" onkeyup="saveTag(event)" type="text" placeholder="Comment here" >
<b>TAG:</b><p class="tagFilter" id="name">tag goes here</p>
<input onclick="clear()" type="button" value="CLEAR" />
</div>
<div class="card">
<h2>Name : User Two</h2>
<h2>Title : Job Two</h2>
Enter your name: <input id="tagInput" onkeyup="saveTag(event)" type="text" placeholder="Comment here" >
<b>TAG:</b><p class="tagFilter" id="name">tag goes here</p>
<input onclick="clear()" type="button" value="CLEAR" />
</div>
<div class="card">
<h2>Name : User Two</h2>
<h2>Title : Job Two</h2>
Enter your name: <input id="tagInput" onkeyup="saveTag(event)" type="text" placeholder="Comment here" >
<b>TAG:</b><p class="tagFilter" id="name">tag goes here</p>
<input onclick="clear()" type="button" value="CLEAR" />
</div>
</div>
</body>
</html>