(Gelöst) HTML Formular um einen Bereich dynamisch erweitern + ID Vergabe

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
Rechtsklick auf die Seite - "Element untersuchen" und dann die Lasche "Console". Kann je nach Browser etwas anders lauten. Dort findest Du u. a. Fehlermeldungen und mit console.log() kannst Du Variablen etc. dort ausgeben lassen.
 
Werbung:

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Hmm, also die einzige Fehlermeldung, die ich erhalte, ist im Bezug auf die erste Funktion. Diese funktioniert aber einwandfrei.

Das dynamische Tabellen erweitern funktioniert nach wie vor leider nicht. Falls Jemand noch eine Idee hat, gerne melden. Wollte das Formular heute um 16:00 Uhr einreichen.
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Okay, also die Funktion an sich funktioniert. Habe einfach mal einen neuen Button hinzugefügt und die Funktion dort dran geklemmt. Jetzt ist die Frage, wieso ich nicht beide Funktionen mit einem Button aufrufen kann.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
Poste doch Mal das HTML für den Button mit den Eventlistenern wie Du es jetzt hast. So wie ich es in #34 gepostet hatte, funktionierte es in meiner Testseite.
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Code:
<input id="moreBtn" value="mehr" onclick="newDay(this); neueZeile(this);" type="button"></input>
        <input id="moreBtn2" value="Tabelle mehr" onclick="neueZeile(this);" type="button"></input>
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Vielleicht ist meine Idee mit der Tabelle als Ansatz auch falsch. Was ich in das HTML Formular ist folgendes:

Für jeden Reisetag, der eingegeben wird, soll am Ende des Formulars eine Summierung des Reisetags stattfinden. Ebenso sollen alle angegebenen Reisetage als Gesamtsumme gezeigt werden.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
die einzige Fehlermeldung, die ich erhalte, ist im Bezug auf die erste Funktion. Diese funktioniert aber einwandfrei.
Diesen Fehler trotzdem beheben. Es kann sein, dass das Skript dadurch abbricht und die zweite Funktion gar nicht mehr dran kommt.
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Das ist die Fehlermeldung die ich erhalte:

Code:
Uncaught TypeError: Cannot read property 'append' of null
    at newDay (Reisekostenabrechnung Upload Neue Struktur.html:240)
    at HTMLInputElement.onclick (Reisekostenabrechnung Upload Neue Struktur.html:352)

Betroffene Zeilen:

Code:
//Button wieder unter das Template platzieren
document.querySelector('.Feld4').append(addBtn);

Code:
<input id="moreBtn" value="mehr" onclick="newDay(this); neueZeile(this);" type="button"></input>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
Offenbar gibt es kein Element mit der Klasse .Feld4. Versuche, die fehlerhafte Zeile wegzulassen und das vorbereitete HTML vor dem Button einzufügen:
Code:
document.querySelector('#moreBtn').insertAdjacentHTML('beforebegin', html);
 
Werbung:

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Der Fehler ist nun Geschichte. Jedoch wird nun durch einen Klick auf den Button "mehr" 2 neue Fieldsets erstellt.
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Code:
<script>
            let nrDay = 1;
      
            function newDay(addBtn){
              
                //Nummer des Tages erhöhren
                nrDay++;
              
                //HTML aus dem Template lesen
                let html = document.getElementById('new_passage').innerHTML;
              
                //Alle Vorkommen des Platzhalters, durch Nummer des Tages ersetzen
                html = html.replace(/\{nrtag\}\}/g, nrDay);
              
                //Template einfügen
                //document.querySelector('.Feld3').insertAdjacentHTML('afterend', html);
              
                //Button wieder unter das Template platzieren
                document.querySelector('#moreBtn').insertAdjacentHTML('beforebegin', html);
              
            }
  
        </script>

Habe die Zeile Code unter //Template einfügen auskommentiert. Nun wird nur noch 1x das Template eingefügt und es kommt keine Fehlermeldung mehr. Dadurch werden nun auch beide Funktionen per einmaligen Knopfdruck ausgeführt.

Vielen Dank für deine erneute Hilfe! :)
 
Werbung: