fetch - API - Probleme? JavaScript

M

MrOsmo

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

MrOsmo

Mitglied
M.L. hat gesagt.:
(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.
Zum Vergrößern anklicken....
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.

M.L.

Top Contributor
MrOsmo hat gesagt.:
Abfrage mit dem Löschen zu tun?
Zum Vergrößern anklicken....
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 ):
HTML: 
<button id="myButton">Button</button>
Javascript: 
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"; }
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
M JavaScript - Fetch Probleme Angular, React, JQuery - Fragen zu JavaScript 0
M Fetch Probleme - JavaScript? Angular, React, JQuery - Fragen zu JavaScript 1
L JSON-Daten aus einen Server mit fetch holen Angular, React, JQuery - Fragen zu JavaScript 3
R Probleme mit Angular | Gängige Strukturen und Herangehensweisen Angular, React, JQuery - Fragen zu JavaScript 3
B Probleme bei der Ausgabe eines Objektes. Angular, React, JQuery - Fragen zu JavaScript 2
P Probleme beim Save Operator mit Bootstrap Angular, React, JQuery - Fragen zu JavaScript 1
Z Timer Probleme Angular, React, JQuery - Fragen zu JavaScript 3
S Probleme beifind method (window) Angular, React, JQuery - Fragen zu JavaScript 1
DeVolt Probleme mit onreadystatechange Angular, React, JQuery - Fragen zu JavaScript 2
N Probleme, JavaScript anzupassen Angular, React, JQuery - Fragen zu JavaScript 5
V Spritely - Probleme bei mehrzeiliger Bilddatei - momentaner Frame Angular, React, JQuery - Fragen zu JavaScript 2
O Probleme mit Web Navigation! Angular, React, JQuery - Fragen zu JavaScript 6
P Probleme mit Java Countdown Angular, React, JQuery - Fragen zu JavaScript 4
M Probleme mit anzeige Angular, React, JQuery - Fragen zu JavaScript 5
B Probleme mit einem JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
M probleme mit JavaScript programmierung Angular, React, JQuery - Fragen zu JavaScript 2
G Probleme mit window.scrollTo(x, y); Angular, React, JQuery - Fragen zu JavaScript 2
Heike Probleme bei Cookies setzen Angular, React, JQuery - Fragen zu JavaScript 2
G Probleme mit Voting-Skript Angular, React, JQuery - Fragen zu JavaScript 2
M 2 PopUps auf einer .htm...Probleme Angular, React, JQuery - Fragen zu JavaScript 2
P Probleme mit POPUP Window Angular, React, JQuery - Fragen zu JavaScript 2
M JavaScript Hilfe dringend (v.2) Angular, React, JQuery - Fragen zu JavaScript 1
P Cypress Test mit javascript ergibt [object Undefined] Meldung Angular, React, JQuery - Fragen zu JavaScript 0
F Javascript Problem bei mehrere ID's Angular, React, JQuery - Fragen zu JavaScript 7
B JavaScript - Array mit Objekten anhand des Object-keys sortieren Angular, React, JQuery - Fragen zu JavaScript 2
I JavaScript: Array umgekehrt von vorn auffüllen Angular, React, JQuery - Fragen zu JavaScript 7
B Kommunikation zwischen Javascript und Java? Angular, React, JQuery - Fragen zu JavaScript 7
A Problem bei Sortierung von Rechnungsnummern mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 1
B Besseres Arbeitsmanagement bei Javascript Programm? Angular, React, JQuery - Fragen zu JavaScript 19
I Fehler im JavaScript? Angular, React, JQuery - Fragen zu JavaScript 2
B Rich Text Editor With Javascript Angular, React, JQuery - Fragen zu JavaScript 1
B nodeJS JavaScript Object require Angular, React, JQuery - Fragen zu JavaScript 12
Aartiyadav Annotation in Javascript and Typescript Angular, React, JQuery - Fragen zu JavaScript 2
B Javascript Tutorial für DOM Manipulationen? Angular, React, JQuery - Fragen zu JavaScript 0
Q Mit JavaScript Daten aus einer Textdatei verarbeiten Angular, React, JQuery - Fragen zu JavaScript 2
H RegExp in Javascript String Angular, React, JQuery - Fragen zu JavaScript 1
B php Datei in JavaScript öffnen Angular, React, JQuery - Fragen zu JavaScript 9
M Einkaufswagen JavaScript Angular, React, JQuery - Fragen zu JavaScript 4
Zeppi Javascript JSON in ein Array Angular, React, JQuery - Fragen zu JavaScript 1
Cellsplitter Api auslesen und in Json Datei speichen - Javascript (node js) Angular, React, JQuery - Fragen zu JavaScript 10
B DOM Baum in JavaScript document.body.childNodes[1] Angular, React, JQuery - Fragen zu JavaScript 10
Noahscript [Frage]: Wie erstelle ich eine htmlspecialchars_decode mit JavaScript? Angular, React, JQuery - Fragen zu JavaScript 1
A Javascript validateInput Angular, React, JQuery - Fragen zu JavaScript 0
Zeppi Javascript URL als Link Angular, React, JQuery - Fragen zu JavaScript 2
T Javascript x-Axis fortlaufendes Datum eintragen Angular, React, JQuery - Fragen zu JavaScript 0
P Editor- mit javascript Sonderzeichen beim schreiben vorschlagen Angular, React, JQuery - Fragen zu JavaScript 0
Jose Merchan JavaScript and SEO Angular, React, JQuery - Fragen zu JavaScript 0
B JavaScript Button hinzufügen Angular, React, JQuery - Fragen zu JavaScript 2
A Ich habe eine frage zu JavaScript adblock detector? Wenn jemand auf OK Klick soll die Sete neu geladen werden Angular, React, JQuery - Fragen zu JavaScript 1
d.lumpi in javascript input erstellen Angular, React, JQuery - Fragen zu JavaScript 4
Martob282 Belegnummerierungsstempel mit JavaScript erstellen Angular, React, JQuery - Fragen zu JavaScript 34
N Javascript: mehrere Textfelder prüfen ob es sich um eine Zahl handelt und diese zwischen 1 und 49 liegt Angular, React, JQuery - Fragen zu JavaScript 10
S Javascript Canvas RadialGradient -> SVG Gradient Angular, React, JQuery - Fragen zu JavaScript 0
C JavaScript in Siri-Shortcuts zur Webseiten Bedienung Angular, React, JQuery - Fragen zu JavaScript 8
N TypeScript zu JavaScript Angular, React, JQuery - Fragen zu JavaScript 1
M Taste mit Javascript simulieren Angular, React, JQuery - Fragen zu JavaScript 6
B Rauch per Javascript auf Bild packen? Angular, React, JQuery - Fragen zu JavaScript 4
X Ohm Rechner in JavaScript aber was bedeutet Power? Angular, React, JQuery - Fragen zu JavaScript 103
ruutaiokwu JavaScript in Angular 8-Anwendung verwenden Angular, React, JQuery - Fragen zu JavaScript 11
T Ich möchte einen Button mit JavaScript ausblenden Angular, React, JQuery - Fragen zu JavaScript 5
J Html Button mit JavaScript ausführen Angular, React, JQuery - Fragen zu JavaScript 5
L [JavaScript] Mehrere Variablen für Live-Suche in MySql-DB Angular, React, JQuery - Fragen zu JavaScript 0
D Java Tool um HTML und Javascript zu analysieren Angular, React, JQuery - Fragen zu JavaScript 3
P Hashes in JavaScript Angular, React, JQuery - Fragen zu JavaScript 7
P Zahlen in JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
M Spalte verlinken mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 9
P Angular vor JavaScript lernen? Angular, React, JQuery - Fragen zu JavaScript 1
S Unterstützung in Javascript Angular, React, JQuery - Fragen zu JavaScript 2
W Javascript + couchDB Angular, React, JQuery - Fragen zu JavaScript 2
T Grafische und tabellarische Datendarstellung mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 2
E Javascript wenn Variable aktualisiert wird, dann prüfe Angular, React, JQuery - Fragen zu JavaScript 0
D Javascript um eine Seite in einem PDF Formular ein-/Ausblenden zu lassen Angular, React, JQuery - Fragen zu JavaScript 3
ARadauer JavaScript und replace... Angular, React, JQuery - Fragen zu JavaScript 1
P Richtiges Auslesen von mehreren Daten im JSON Format via JavaScript Angular, React, JQuery - Fragen zu JavaScript 2
n00b4u JavaScript Daten lokal Speichern Angular, React, JQuery - Fragen zu JavaScript 7
C per Javascript auf S4 nach Sensordaten fragen? Angular, React, JQuery - Fragen zu JavaScript 2
B Fehler im JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
C In Wordpress unter Custom-Js mit Javascript den ursprünglichen Code deaktivieren Angular, React, JQuery - Fragen zu JavaScript 0
K Javascript "Bild mit Pfeiltasten automatisch bewegen" HILFE Angular, React, JQuery - Fragen zu JavaScript 0
M Javascript Höhe Angular, React, JQuery - Fragen zu JavaScript 2
N Problem - Google Analytics Tracking Javascript Datei von eigenen Server laden Angular, React, JQuery - Fragen zu JavaScript 1
C Javascript Image.getRGB(x,y) Angular, React, JQuery - Fragen zu JavaScript 1
K Proxy PAC File Javascript Angular, React, JQuery - Fragen zu JavaScript 2
F Von JavaScript "Spaghetticode" zu Backbone.js Angular, React, JQuery - Fragen zu JavaScript 0
H Javascript für wordpress "open new window" Angular, React, JQuery - Fragen zu JavaScript 1
F JavaScript replace funktion Angular, React, JQuery - Fragen zu JavaScript 1
T JavaScript Variable in Klasse ändern Angular, React, JQuery - Fragen zu JavaScript 2
N JavaScript für Touch Devices bei DropDown Menü Angular, React, JQuery - Fragen zu JavaScript 4
T Javascript - Polygon, wieviel % sind gefüllt Angular, React, JQuery - Fragen zu JavaScript 1
K JavaScript Banner Syntax Error Angular, React, JQuery - Fragen zu JavaScript 4
D JavaScript jTable Angular, React, JQuery - Fragen zu JavaScript 2
Fab1 [SUCHE] JavaScript Buch für Umsteiger Angular, React, JQuery - Fragen zu JavaScript 4
T html code per javascript einfügen Angular, React, JQuery - Fragen zu JavaScript 7
nrg RegExp Split \r\n in Javascript Angular, React, JQuery - Fragen zu JavaScript 5
J JavaScript und "import"? Angular, React, JQuery - Fragen zu JavaScript 10
B [Javascript] bytearray to file Angular, React, JQuery - Fragen zu JavaScript 2
L Javascript Maus Funktion Angular, React, JQuery - Fragen zu JavaScript 4
K JavaScript Kontaktformulare Angular, React, JQuery - Fragen zu JavaScript 2
B Javascript popup Angular, React, JQuery - Fragen zu JavaScript 5
D Sontag ? JavaScript fehler ? Angular, React, JQuery - Fragen zu JavaScript 12

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben