Fetch Probleme - JavaScript?

M

MrOsmo

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


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
 
Oneixee5

Oneixee5

Top Contributor
HTML löschen ist einfach:
Javascript: 
const element = document.getElementById("my_id");
element.remove();
Das hättest du einfacher mit Google gelöst als hier nachzufragen.
Den fetch-Promise hast du ja auch schon dafür:
Javascript: 
 .then(data => {
    // -> ...
  })

Ein Fehler, der immer wieder gemacht wird, ist hier:
Javascript: 
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>
  `
Der return liefert nur Text, kein HTML. Um deinen Button dynamisch zu machen, musst du HTML/DOM-Objekte verwenden.
onclick=logOutButton("${post._id}") kannst du also weglassen, das ist auch kein valides HTML.
Javascript: 
function myListener(id) {
    alert('you clicked on the button: ${id}')
};
document.getElementById("registerButton").addEventListener('click', myListener, '${post._id}')
// or
document.getElementById("registerButton").addEventListener('click', () => myListener('${post._id}'))
Natürlich musst du Backticks verwenden statt der Hochkommas, hier ist bloß so eine blöde Tastatur, deshalb hab ich es mir einfach gemacht.
 
Zuletzt bearbeitet:
Ähnliche Java Themen
  Titel Forum Antworten Datum
M fetch - API - Probleme? JavaScript Angular, React, JQuery - Fragen zu JavaScript 3
M JavaScript - Fetch Probleme Angular, React, JQuery - Fragen zu JavaScript 0
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