Hallo,
bei mir klappt Folgendes nicht:
Wenn ich bei "Registration Form" alle inputs ausfülle, dann kommt ein sogenanntes "Kärtchen" mit deinem Avatar raus. Jedes "Kärtchen" enthält einen button "Log out", und wenn man auf den button drückt, dann sollte das "Kärtchen" nur aus HTML gelöscht werden (aber nicht aus Backend Server- Api) und der "logged" sollte im Backend Server auf false gesetzt werde.
Wie kann man das machen? Ich habe schon davor mit fetch gearbeitet, aber so ein Problem kommt bei mir zum ersten Mal (Bin ja noch komplett ein Noob in JavaScript).
HTML-Code:
<!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-Code:
const registerList = document.getElementById("registerList")
const forms = document.getElementById("forms")
const email = document.getElementById("emailInput")
const user = document.getElementById("userInput")
const picture = document.getElementById("pictureInput")
const createButton = document.getElementById("createButton")
const url = "https://crudcrud.com/api/dac4c32dac5c4861a46ad8aee63df14c/todos"
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.picture}" alt="${post.user}">
<h2 id="registerUser">${post.user}</h2>
<h5 id="registerEmail">${post.email}</h5>
<button onclick=logOutButton("${post._id}") id="registerButton">Log out</button>
</div>
</div>
`
})
registerList.innerHTML = dataList.join("")
}
}
//GET METHOD
fetch (url)
.then(response => response.json())
.then (data => dataRender(data))
//POST METHOD
createButton.addEventListener("click", () => {
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
user: user.value,
email: email.value,
registered: true,
logged: true
})
})
.then(response => response.json())
.then(data => {
const dataArray = []
dataArray.push(data)
dataRender(dataArray)
email.value = ""
user.value = ""
picture.value = ""
console.log(`User ${user.value} registered successful!`)
})
})
//PUT METHOD
const logOutButton = (id) => {
const data = {
user: user.value,
email: email.value,
registered: true,
logged: false
}
fetch(`${url}/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
})
}
Bitte helft mir! Ich weiss wirklich nicht wie das geht und möchte jetzt auch nicht den ganzen Tag dazu verschwenden! Denn ich habe noch andere Hausaufgaben.. Dankeschön im Voraus!
LG
MrOsmo
