Hallo. Ich habe einen kleinen, großen Bug in meinem Code. Vorerst mein Ziel ist es, dass beim Click auf einen expand Button von Bootstrap ein Array als List Element lädt. Es soll für jeden Array Eintrag ein einzelner List Eintrag erstellt werden. Mein Bug : Beim Klicken auf den Expand Button finde ich folgende Fehlermeldung vor : Wenn ich danach nochmal 2 mal auf den Button drücke um das Feld zu schließen und wieder zu öffnen passiert folgendes Mein Code : Danke für jede Hilfe. (Man könnte natürlich auch einfach die Funktion beim laden der Seite einmal ausführen, aber ich würde gerne den konkreten Fehler finden)

Fehler bei JS innerHTML?

Hallo. Ich habe einen kleinen, großen Bug in meinem Code. Vorerst mein Ziel ist es, dass beim Click auf einen expand Button von Bootstrap ein Array als List Element lädt. Es soll für jeden Array Eintrag ein einzelner List Eintrag erstellt werden.

Mein Bug :

Beim Klicken auf den Expand Button finde ich folgende Fehlermeldung vor :

Bild zum Beitrag

Wenn ich danach nochmal 2 mal auf den Button drücke um das Feld zu schließen und wieder zu öffnen passiert folgendes

Bild zum Beitrag

Mein Code :

Bild zum Beitrag

Danke für jede Hilfe. (Man könnte natürlich auch einfach die Funktion beim laden der Seite einmal ausführen, aber ich würde gerne den konkreten Fehler finden)

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

tide1109

11.11.2022, 19:37

Die Fehlermeldung sagt, dass "innerHTML" nicht auf auf einem Objekt mit dem Wert undefined gefunden werden kann.

Mit einem Blick auf die Zeilenangabe und deinem Source Code ist damit die Variable div_container_inner gemeint. Sie ist also in dem Fall undefined.

Das undefined kommt aus der Zeile davor, wo die Variable ihren Wert bekommt.

document.getElementsByTagName() gibt dir alle DOM Elemente (eine Liste) mit dem Tag "a" (in deinem Fall). Genauer gesagt wird dir eine HTMLCollection zurückgegeben.

Auf der Collection willst du den ersten Eintrag i bekommen. Laut der Dokumentation gibt dieser Aufruf undefined zurück, wenn es unter dem Index keinen Eintrag gibt. Hier kommt dein undefined her.

In deiner HTML Datei ist kein a Elemente vertreten, sodass alle möglichen a Elemente in Javascript generiert werden müssen bzw. generiert worden sind.

Ein paar Zeilen darüber setzt du a Elemente in dein DOM. Bei jedem Durchlauf der Schleife setzt du ein neues Elemente, sodass getElementsByTagName() mindestens ein Element garantiert ist.

Dein Problem ist der verwendete Index. Deine Schleife geht von 1 bis (length_array - 1). JavaScript nutzt allerdings ein Zero-based Index und so auch die HTMLCollection.

Mit dem Index 1 möchtest du den zweiten Eintrag abrufen. Es ist allerdings nur ein Eintrag in der Liste vorhanden. Dein Index ist also out-of-bound und gibt undefined zurück.

Beim zweiten Durchlauf ist ein a Element aus dem vorherigen Versuch noch im DOM. Es wird erneut ein a Element hinzugefügt, sodass 2 Elemeten vorhanden sind. Unter dem Index 1 gibt es jetzt ein Eintrag.

Die Lösung: Deine for Schleife muss bei i = 0 beginnen. Der Endwert ist korrekt.

Dein UI Problem liegt daran, dass du jedes Mal nur neue a Elemente hinzufügst und die alten nicht entfernst. Vielleicht ist es auch so von dir gewollt.

Dazu fügst du deine neuen a Elemente am Ende an. In dem zweiten Teil deiner Schleife beginnst du beim Ändern der a Elemente von Vorne an. Dazu umfasst diese Liste alle a Elemente im DOM. Dazu gehören auch die Elemente aus den vorherigen Durchläufen.

Du überschreibst also die ersten Elemente und fügst leere Elemente am Ende hinzu.

white47583

Fragesteller

11.11.2022, 20:01

Einfach nur noch vielen vielen Dank. Danke, dass du dir so viel Mühe gegeben hast. Ich testen das gleich, aber ich denke jz auch das es daran liegt. Danke

pushido

11.11.2022, 15:14

Leider ist nicht zu sehen wie du load array aufrufst. Könntest Du den code hier pasten?

pushido

11.11.2022, 15:18

Ich glaube, das Problem ist bei Zeile 80. Innerhtml wird nicht gefunden und deshalb wird nichts initialisiert.

white47583

Fragesteller

11.11.2022, 15:26

Hi. Leider hab ich den Code noch nicht comittet, ich schreibe uhn hier sobald ich Zuhause bin. Zu deinem Kommentar kannst du mir erklären wie du das meinst ? LG white

pushido

11.11.2022, 15:52

@white47583

Nach Zeile 80 würde ich eine If Abfrage platzieren um festzustellen, ob div_container_inner nicht leer ist. falls es nicht leer ist, würde ich die Zeile 81 in der If bedingung ausführen.

white47583

Fragesteller

11.11.2022, 17:38

@pushido

Das teste ich gleich nacher wenn ich wieder am PC bin. Danke für deine Mühe

Hallo liebe Community,

ich habe eine kleine Website umgesetzt, bei der man in einem Input Formular etwas eingibt und dann klickt man auf einen Knopf und das eingegebene wird in einem HTML Listenelement dargestellt. Der Input wird im Local Storage des Browsers gespeichert.

Mein Bug :

Beim klicken des Buttons wird der eingegebene Text nicht als ganzes in einem Listenelement dargestellt, sondern jeder Buchstabe in eine Element gesetzt.

Mein Code :

HTML :

PS : Leider ist de Code zu lang um ihn hier einzufügen.

LG white

Danke für jeden der sich das hier ansieht und versucht mir zu helfen

...zur Frage

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.

...zur Frage

JS : mit onclick Farbe eines Elements ändern?

Hallo,

(der Titel der Frage mag etwas komisch klingen, aber ich wusste nicht wie ich es sonst noch formulieren soll)

ich habe mal wieder ein Problem.

Ich habe Code geschrieben, der ein Array "visualisiert" bzw. es in eine HTML Liste einfügt, nun möchte ich, dass beim klicken auf ein Element sich die Farbe des Elements ändert und zusätzlich noch anderer Code ausgeführt wird.

Mein Problem :

Ich weiß nicht welches Element geklickt wurde. Ich füge ja ein Array in eine Liste ein, unzwar immer nach der gleichen "Vorlage", danach füge ich noch Klassen hinzu und muss eben auch das onlick mit JS hinzufügen.

Es klingt hier alles sehr komisch, aber ich weiß nicht wie ich es besser erklären soll.

Ich habe nochmal einen Kommentar an der onclick stelle geschrieben.

Ich finde keine Lösung, die es möglich mach, dass man unendlich viele Elemente mit push zum Array hinzufügen kann, diese dann wieder in die Liste einfügt und es trotzdem möglich ist, dass bestimmter Code ausgeführt wird

Wer es nicht verstanden hat, ich habe auch Discord zur Not könnte ich auch versuchen es mündlich zu erklären, wie ich es meine. (schriftlich ist grade bisschen schwer)

Danke für jede Antwort.

Ich bin gerade am verzweifeln

...zur Frage

joomla 4 menü eintrag probleme?

Hey und zwar möchte ich auf meiner Website die Menüs "Home", "Über mich", und "Schuljahre". Ich ahbe diese als einzelner Beitrag erstellt. Es wird aber nur ein Menü angezeigt, das i als "Startseite" ausgewählt habe und sobald ich zu einem menü wächeln will kommt der fehler "404 Seite nicht gefunden". Die Menüs funktionieren ja aber nur die, die als Stamdartmenü auf der startseite amgezeigt werden. Was könnte ich vergessen haben oder das Problem sein?

...zur Frage

Paragraphen mit Button in JS ausblenden?

Kann mir jemand sagen, wie ich mit dem vorgegebenen Code (ich darf nichts ändern, sondern nur die function ergänzen) die Paragraphen ausblenden kann?

...zur Frage

Wie kann ich iframe Cookies speichern?

Hallo zusammen, ich bin neu hier im Forum und hoffe, dass meine Frage / mein Problem hier richtig platziert ist: ich möchte für eine Auftragsarbeit (Insektenschutz-Website) eine Website mit einem iframe der url https://www.neher.de/produkte erstellen.

Zur Erstellung nutze ich bootstrap. Den iframe habe ich in die html eingebunden, es wird auch alles angezeigt und geladen - so weit so gut.

Jetzt ist es aber so, dass auf der eingebundenen neher.de Website Cookies abgefragt werden. Wie schaffe ich es möglichst mit JavaScript diese Cookies zu speichern?

Sonst muss ich ja wenn ich z.B. auf das Produkt "Pendeltür" klicke, wieder die Cookies akzeptieren, obwohl ich das ja schon getan habe - ich hoffe ihr versteht was ich damit meine.

Leider habe ich keine Ahnung von JS - ich hoffe es kann mir hier jemand helfen.

Schon mal vielen Dank dafür - VG Felix

Das ist der html Code:

<!DOCTYPE html><html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Bootstrap demo</title>
    <link rel="stylesheet" href="bootstrap.css" />
    <style> main iframe { width: 100%; height: 65vh; }</style>
  </head>
  <body>
    <main>
      <iframe src="https://www.neher.de/produkte" frameborder="0></iframe>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
       crossorigin="anonymous"></script>
    </main>
  </body>
</html>

...zur Frage

bootstrap Modal beim Seiten-laden öffnen lassen, wie?

hallo ich habe ein bootstrap-modal und derzeit ein button womit sich das öffnet. ich will jetzt aber dass es sich direkt beim öffnen der seite öffnet, habe gegoogelt und JS scripts wie diesen gefunden aber da passiert einfach nix.

 $(window).load(function(){        
   $('#myModal').modal('show');
    });

wie lasse ich ein modal beim aufrufen öffnen ??

...zur Frage

JS ARRAYS + RECHNEN?

Also ich habe ein Programm wo man per Knopfdruck über einen Prompt etwas schreiben kann und das steht dann im Array, aber es soll so sein das wenn man auf einen anderen Button drückt ein Allert kommt in dem steht wie viel alles zusammen ist also ich möchte es + rechnen.

Falls es hilfreich ist hier mein Code:

<html>

<head>

</head>

<body>

<h1>Stromverbrauch</h1>

<button onclick="addNewItem(); updateList();">Neuen Verbrauch hinzufügen</button>

</ul>

let shoppingItems = getShoppingItemsFromLocalStorage();

updateList();

function getShoppingItemsFromLocalStorage() {

let items = localStorage.getItem('shoppingItems');

if (items == null || items == '') {

items = [];

} else {

items = items.split(',');

}

return items;

}

function addNewItem() {

let item = prompt('Welchen Verbrauch hast du?');

if (item != null) {

shoppingItems.push(item);

localStorage.setItem('shoppingItems', shoppingItems);

}

function removeItem(itemIndex) {

shoppingItems.splice(itemIndex, 1);

localStorage.setItem('shoppingItems', shoppingItems);

}

function updateList() {

document.getElementById('list').innerHTML = '';

for (let index = 0; index < shoppingItems.length; index += 1) {

document.getElementById('list').innerHTML += '<li>' + shoppingItems[index] +

' <button onclick="removeItem(' + index + '); updateList();">X</button></li>';

}

</script>

</body>

</html>

...zur Frage

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

h3 Text ändern in JS?

Wie kann ich in JS den Text eines h3 tags ändern? egal was ich probiere, innerHTML, text, innerText oder html. Es kommt immer dieser Fehler:

Uncaught TypeError: Cannot set property 'innerText' of null

at eval (eval at <anonymous> (contact.php?error:%uEm%uS%uCt&FNV=fxbxcbxcb&LNV=xcbxcbxcb&mailSent:1), <anonymous>:1:54)

Wie behebe ich diesen Fehler?

...zur Frage

Node.js: Wie kann ich den push-Fehler verhindern?

Code:

function file_tree(dir1, files1) {
 const filesArray = fs.readdirSync(dir).filter(file => fs.lstatSync(dir+file))
 for (let i = 0; i < filesArray.length; i++) {
  
 // Use stat() method
 fs.stat(dir+filesArray[i], (err, stats) => {
  if (!err) {
   if (stats.isDirectory()) {
    dir1.push(filesArray[i]);
   }
   else if (stats.isFile()) {
    files1.push(filesArray[i]);
    
   }
 }
 else
   throw err;
});
}
console.log(files1)
return dir1, files1
}
var dir1 = new Array();
var files1 = new Array();
dir1[n] = new Array();
files1[n] = new Array();
dir, files = file_tree(dir1, files1)
console.log(dir)
console.log(files);

Ausgabe:

undefined
[]
[]
    files1.push(filesArray[i]);
        ^
TypeError: Cannot read properties of undefined (reading 'push')
  at <dir>.js:32:16
  at FSReqCallback.oncomplete (node:fs:201:5)
Node.js v20.5.1

Frage:

Wie kann ich den push-Fehler verhindern?

Ich habe es so versucht, doch:

var dir1 = new Array();
var files1 = new Array();
dir1[n] = new Array();
files1[n] = new Array();

...zur Frage

Wie update ich den HTML Text?

Ich bin in der Programmier AG meiner Schule und soll es jetzt so machen, dass der Fehler Text sobald ich einen Fehler mache geupdated wird und die Anzahl der Fehler aktuell ist. Gerade aktualisiert es nur wenn ich etwas richtiges eingebe.

Der Code lautet wie folgt:

<html>
<head>
<meta charset="utf-8">
<title>Kopfrechnen-Quiz</title>
<script>
var richtigeAntwort;
var aktuelleNummer = 1;
var Anzahlfalsch = 0;
function wennGeladen() {
stelleAufgabe();
aktuelleNummer = 1;
//alert(Math.floor( Math.random() * 100 ));
Anzahlfalsch = 0;
}
function pruefeAntwort() {
event.preventDefault();
if (document.getElementById("antwort").value == richtigeAntwort) { 
alert("Richtig!");
aktuelleNummer++;
stelleAufgabe();
}
else {
alert ("Leider falsch. Bitte nochmal versuchen");
refresh ("falsch")
Anzahlfalsch++;
}
}
function stelleAufgabe() {
var zahl1 = Math.floor(Math.random()*100);
var zahl2 = Math.floor(Math.random()*100);
richtigeAntwort = zahl1 + zahl2;
document.getElementById("falsch").innerHTML = "Anzahl der Fehler: " + Anzahlfalsch;
document.getElementById("nummer").innerHTML = "Aufgabe Nummer: " + aktuelleNummer;
document.getElementById("aufgabe").innerHTML = zahl1 + "+" + zahl2 + ":";
}
</script>
</head>
<body onload="wennGeladen()">
<h1>Kopfrechnen-Quiz</h1>
<h2 id="nummer"></h2>
<h3 id="falsch"></h3>
Bitte berechne: <span id="aufgabe"></span>
<form onSubmit="pruefeAntwort()">
<input id="antwort">
</form>
</body>
</html>

es wäre nett, wenn mir jemand helfen könnte.

...zur Frage

Scroll Schnelligkeit einzelner Elemente verändern (Website)?

Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)

...zur Frage

Html+Js Code funktioniert nicht?

Hallo, ich habe ein Problem mit meinem Code. Hier ist er:

<script>
document.getElementById(“Test gelungen”).innerHTML = test;
</script>

<p>Ist der <span id=“test”><span>

Angezeigt werden soll eigentlich: Ist der Test gelungen

Es wird aber nur “Ist der” angezeigt. Das Java Script ist eigentlich in einer seperaten Datei. Meine Frage: Was ist falsch?

Ich danke euch sehr für eure Antworten!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen