Fórum Preciso de ajuda com a adição de elementos html na página usando js #623644
01/02/2025
0
Estou com um pouco de dificuldade em entender pq esse código está substituindo o elemento html que crio primeiro e não adicionando outro logo após o primeiro.
Vou mandar abaixo o código em que adiciono os itens no localstorage e quando uso eles.
// PARTE DE CADASTRO DOS ITENS NO LOCALSTORAGE
const clientForm = document.querySelector("#client-form");
clientForm.addEventListener("submit", (e) => {
e.preventDefault();
const clientNameInput = document.querySelector("#tutorName");
const adressInput = document.querySelector("#adress");
const phoneInput = document.querySelector("#phone");
const dateInput = document.querySelector("#date");
const petNameInput = document.querySelector("#petName");
const ageInput = document.querySelector("#age");
const sizeInput = document.querySelector("#size");
let clientObject = {
clientName: clientNameInput.value,
adress: adressInput.value,
phone: phoneInput.value,
date: dateInput.value,
petName: petNameInput.value,
age: ageInput.value,
size: sizeInput.value,
}
let clientList = JSON.parse(localStorage.getItem("clientData")) || [];
clientList.push(clientObject);
localStorage.setItem("clientData", JSON.stringify(clientList))
window.location.href = "clientList.html";
})
// PARTE DE ADIÇÃO DOS CLIENTE DO LOCALSTORAGE NA LISTA
const divCards = document.querySelector(".cards-container");
const saveCard = () => {
let clientList = JSON.parse(localStorage.getItem("clientData")) || [];
if (localStorage.getItem("clientData") != null) {
let petNome = ""
let data = ""
if (clientList.length > 0) {
let recentClient = clientList[clientList.length - 1];
petNome = recentClient.petName;
data = recentClient.date;
}
const card = document.createElement("div")
card.classList.add("card")
const cardImage = document.createElement("div")
cardImage.classList.add("image")
card.appendChild(cardImage)
const image = document.createElement("img")
image.src = "./css/assets/clients/dog.png"
image.alt = ""
image.async = true
cardImage.appendChild(image)
const cardData = document.createElement("div")
cardData.classList.add("data")
card.appendChild(cardData)
const cardName = document.createElement("h2")
cardName.textContent = petNome
cardData.appendChild(cardName)
const cardDate = document.createElement("p")
cardDate.textContent = data
cardData.appendChild(cardDate)
divCards.appendChild(card)
}
}
saveCard()
Vou mandar abaixo o código em que adiciono os itens no localstorage e quando uso eles.
// PARTE DE CADASTRO DOS ITENS NO LOCALSTORAGE
const clientForm = document.querySelector("#client-form");
clientForm.addEventListener("submit", (e) => {
e.preventDefault();
const clientNameInput = document.querySelector("#tutorName");
const adressInput = document.querySelector("#adress");
const phoneInput = document.querySelector("#phone");
const dateInput = document.querySelector("#date");
const petNameInput = document.querySelector("#petName");
const ageInput = document.querySelector("#age");
const sizeInput = document.querySelector("#size");
let clientObject = {
clientName: clientNameInput.value,
adress: adressInput.value,
phone: phoneInput.value,
date: dateInput.value,
petName: petNameInput.value,
age: ageInput.value,
size: sizeInput.value,
}
let clientList = JSON.parse(localStorage.getItem("clientData")) || [];
clientList.push(clientObject);
localStorage.setItem("clientData", JSON.stringify(clientList))
window.location.href = "clientList.html";
})
// PARTE DE ADIÇÃO DOS CLIENTE DO LOCALSTORAGE NA LISTA
const divCards = document.querySelector(".cards-container");
const saveCard = () => {
let clientList = JSON.parse(localStorage.getItem("clientData")) || [];
if (localStorage.getItem("clientData") != null) {
let petNome = ""
let data = ""
if (clientList.length > 0) {
let recentClient = clientList[clientList.length - 1];
petNome = recentClient.petName;
data = recentClient.date;
}
const card = document.createElement("div")
card.classList.add("card")
const cardImage = document.createElement("div")
cardImage.classList.add("image")
card.appendChild(cardImage)
const image = document.createElement("img")
image.src = "./css/assets/clients/dog.png"
image.alt = ""
image.async = true
cardImage.appendChild(image)
const cardData = document.createElement("div")
cardData.classList.add("data")
card.appendChild(cardData)
const cardName = document.createElement("h2")
cardName.textContent = petNome
cardData.appendChild(cardName)
const cardDate = document.createElement("p")
cardDate.textContent = data
cardData.appendChild(cardDate)
divCards.appendChild(card)
}
}
saveCard()

Eduardo Fritzen
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)