fetch - API - Probleme? JavaScript

[MrOsmo]

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!

<!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>

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

 

[M.L.]

nur aus HTML gelöscht werden

(offtopic) gab es keine Anleitung an die Hand ? Und was das Löschen (bzw. Nicht-Darstellen eines Controls) angeht könnte man das mit einer Abfrage kombinieren, die auf das (Nicht-)Vorhandensein passender Daten im Backend kontrolliert.

 

[MrOsmo]

(offtopic) gab es keine Anleitung an die Hand ? Und was das Löschen (bzw. Nicht-Darstellen eines Controls) angeht könnte man das mit einer Abfrage kombinieren, die auf das (Nicht-)Vorhandensein passender Daten im Backend kontrolliert.

Erst einmal dankeschön für deine Antwort! Das mit dem Löschen habe ich leider nicht ganz verstanden, denn was hat eine Abfrage mit dem Löschen zu tun? Könntest du vielleicht bitte den Anfang des Codes zeigen. sodass ich verstehe, was du meinst? Dankeschön im Voraus!)

 

[M.L.]

Abfrage mit dem Löschen zu tun?

Posting #1 lässt sich so interpretieren, dass (wenigstens) eine Bedingung zum Nicht-Anzeigen (oder Löschen) von "Kärtchen" beim Neuladen erfüllt sein will.... Diese Bedingung(en) gilt es (wohl) in JavaScript zu definieren und zu nutzen (Code-Beispiel einer KI, statt "myButton" den richtigen Namen des "Kärtchens" verwenden ):

<button id="myButton">Button</button>

const myButton = document.getElementById("myButton"); // Ergebnis des binären Ausdrucks
 const result = true; // Wenn das Ergebnis wahr (z.B. vorher kein "Log-out" stattgefunden hat ->Abfrage der Variable bei crudcrud.com ) ist, den Button anzeigen 
if (result) {  myButton.style.display = "block"; } else {  myButton.style.display = "none"; }