Javascript HTML?

Ich habe ein Programm wo man Articles dargstellt in Cards mit einer funktion löschen kann, jede Card hat einen Delete Button, sobald ich einen lösche kann ich nichts anderes mehr löschen:

Bild zum Beitrag

bitte um hilfe

1 Antwort

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

11.06.2024, 22:44

Hi MATHECLUES,

dein Code ist unvollständig oder ich habe was übersehen. Ersteinmal gebe ich dir den Tipp anstatt target doch currentTarget zu verwenden.

Meine Empfehlung: Erstelle ohne innerHTML neue Elemente. Es kann sein dass das DOM Probleme hat neue Elemente zu erkennen die mithilfe von innerHTML eingefügt wurden. Zudem würde ich für jedes mal wenn ein entsprechendes Elternelement erstellt wurde dann nachfolgend ein EventListener hinzuzufügen.

Du kannst auch Trick anwenden damit du auch aus Template literals ganze Elemente erstellen kannst, die dann im DOM aufgenommen werden können ohne Probleme.

Und zwar packst du die Template Literals in template-Elementen und dann kannst du diese sauber in den DOM einfügen lassen. Danach löscht du das benutzte template-element und gut.

Du kannst auch direkt Elemente erstellen und dann per DOM-Manipulation einfügen mit der Methode createElement was du vereinzelt auch schon gemacht hast.

Hinweis: Bitte Verwende in gutefrage.net den Codeeditor und kopiere deinen Code hinein. Dann bekommst du auch Code zurück ;-)

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Ähnliche Beiträge

Javascript Button erstellen?

Hallo,

ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.

<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>

Aktueller Stand

...zum Beitrag

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

...zum Beitrag

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zum Beitrag

Ist es möglich in php eine JavaScript Funktion auszulösen?

Ich muss eine JavaScript Funktion auslösen um auf Seite „2“ zu kommen die aber durch ein neu Ladens von php nach einen button clicks geschlossen wurde aber ich bekomme das irgendwie nicht hin obwohl ich allen regeln die ich im Internet lese befolge, weiß jemand was ich falsch mache?

...zum Beitrag

javascript const in html ausgeben?

Hallo,

untenstehender Code wartet auf ein clickevent in meiner Tabelle und speichert dann die value des geklickten buttons in const dialogId. Das ganze möchte ich dann gerne in html ausgeben. Kann mir jemand helfen?

    const table = document.querySelector('#meineTabelle');
    table.addEventListener('click', event => {
      if (event.target.matches('.dialog-open')) {
        const dialogId = "Hello there";
        dialogOeffnen(dialogId);
      }
    });

...zum Beitrag

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zum Beitrag

Java in HTML Programm nutzen?

Ich habe Java gelernt und kenne mich damit relativ gut aus. Meine Frage wäre, ob ich mir jetzt anschauen müsste wie JavaScript funktioniert oder ist es auch möglich auf einer Website die mit HTML geschrieben wurde die Funktionen von Buttons usw. mit Java umzusetzen?

...zum Beitrag

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zum Beitrag

Button in html?

Wie erstelle ich Button in html die man nach links verschieben kann und wenn ein anderer verschoben wird, dass der andere wieder zurück in die ursprüngliche Lage geht.

Wenn möglich sollte der Code (html, css und javascript) möglichst kurz sein und für PC sowie mobile Geräte verfügbar sein.

Danke

...zum Beitrag

Wie ändere ich einen Paragraph indem ich einen Button benutze mithilfe von HTML und Javascript?

Hallo zusammen,

ich benötige einen Code. Ich möchte einen Paragraphen anzeigen lassen mit einem Text, der sich auf Knopfdruck ändern lässt und immer eine Value weiter springt, wenn ich diesen Button anklicke. Wie schreibe ich diesen Code mit HTML und JS?

Ich finde leider nur Hilfe für einen Text, der sich nur einmalig per Knopfdruck ändert. Ich möchte aber, dass dieser sich jedes Mal ändert, sobald ich den Button nochmal anklicke.

...zum Beitrag

In HTML/Javascript Taschenrechner-Element Löschen Taste einbauen?

Moin zusammen,

Ich muss für meine Ausbildung mithilfe von HTML und Javascript einen Taschenrechner samt Funktionen bauen. Ich bin soweit auch mit allem fertig nur weiß ich nicht wie ich einer Taste die Funktion onclick zuweisen kann, dass ein Element im Result Area gelöscht wird. Ich kann lediglich alle angehängten Elemente im result area löschen. Gibt es hierfür eine vordefinierte Funktion? Hoffe es ist einigermaßen verständlich formuliert. Z.B. steht im Ergebnisfeld: "4+48" und nun möchte man nur die "8" weglöschen und nicht alles. Vielen dank!

...zum Beitrag

Wie kann ich einen Zufallsgenerator programmieren?

Ich möchte gerne ein Zufallsgeneraor erstellen, der durch Drücken eines Buttons einen zufälligen Text aus einer Liste auswählt und anzeigt.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen