Hallo zusammen!
wenn ich auf das Button "log out" drücke, dann löscht sich mein Kärtchen, aber nach dem Aktualisieren der Seite erscheint das Kärtchen wieder. Es sollte nur aus HTML gelöscht werden, und die Daten im Backend Server sollen bleiben! Weiß jemand, woran es liegen könnte? Dankeschön im Voraus!
Liebe Grüße
MrOsmo
wenn ich auf das Button "log out" drücke, dann löscht sich mein Kärtchen, aber nach dem Aktualisieren der Seite erscheint das Kärtchen wieder. Es sollte nur aus HTML gelöscht werden, und die Daten im Backend Server sollen bleiben! Weiß jemand, woran es liegen könnte? Dankeschön im Voraus!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration | Form</title>
<link rel="stylesheet" href="./CSS/settings.css">
<link rel="stylesheet" href="./CSS/style.css">
<link rel="stylesheet" href="./CSS/javascriptStyles.css">
<script defer src="./JavaScript/script.js"></script>
</head>
<body>
<div class="container">
<div class="container-two">
<div class="registration-form">
<h2 id="heading">● Registration Form ●</h2>
<div class="forms">
<input id="emailInput" type="text" placeholder="example@gmail.com">
<input id="userInput" type="text" placeholder="Username">
<input id="pictureInput" type="text" placeholder="Picture">
<button id="createButton">Create Account</button>
</div>
<p id="signInText">Already have an account? <a href="../PageTwo/index.html" id="aText">Sign in</a></p>
</div>
</div>
</div>
<div id="registerList">
</div>
</body>
</html>
Javascript:
const emailInput = document.getElementById("emailInput")
const userInput = document.getElementById("userInput")
const pictureInput = document.getElementById("pictureInput")
const createButton = document.getElementById("createButton")
const registrationList = document.getElementById("registerList")
const url = "https://crudcrud.com/api/0756fddaec394ee995442f231e7591a1/users"
const dataRender = (posts) => {
if (posts === undefined) {
console.log("Loading...");
} else {
let dataList = posts.map((post) => {
return `
<div class="register-container">
<div class="inner-container">
<img id="registerPicture" src="${post.pictureInput}" alt="${post.userInput}">
<h2 id="registerUser">${post.userInput}</h2>
<h5 id="registerEmail">${post.emailInput}</h5>
<button onclick="logOutUpdate('${post._id}')" id="registerButton">Log out</button>
</div>
</div>`
})
registrationList.innerHTML = dataList.join()
}
}
fetch(url)
.then((response) => response.json())
.then((data) => dataRender(data));
createButton.addEventListener("click", async () => {
const userDate = {
user: userInput.value,
email: emailInput.value,
registered: true,
logged: true
}
try {
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(userDate)
})
const data = response.json()
dataRender([data])
} catch (error){
console.error(error);
}
})
const logOutUpdate = async (id) => {
const userData = {
user: userInput.value,
email: emailInput.value,
registered: true,
logged: false
}
try {
fetch(`${url}/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(userData)
})
registrationList.innerHTML = ""
}
catch (error) {
console.error(error);
}
}
Liebe Grüße
MrOsmo