QuerySelectorAll.forEach hilfe

[Cc_Cc_Cc]

Tag,

ich wollte ein Counter einfügen für jede Box.

Ich habe z.b 5 Beiträge und jeder der Beiträge soll den Counter 0 haben.(Bzw für jedes Form-Feld soll 0 gesetzt werden.)

Ich habe hier mal 2 Beiträge:

form-list-1
Beitrag: Hallo
button

form-list-2
Beitrag: Hi
button

Wenn ich jetzt auf form-list-2 button klicke, soll er den Counter +2 nehmen und speichern. Wenn ich nochmal drauf klicke, ist der Counter ja auf 4. Wenn ich jetzt auf form-list-1 klicke, soll der Counter 2 sein.

Das Problem ist, wie definiere ich die Variable Counter für jedes form-Feld?

Das hab ich gefunden:

 Spoiler

document.querySelectorAll("box-form").forEach(function(item){item.counter = 0;});

Jetzt wollte ich noch eine Function button_click schreiben, der so aussehen sollte:

 Spoiler

function button_click(e) {
e.preventDefault()

counter = counter +2;
}

HTML:

 Spoiler

<form class="box-form">
	<button type="submit" class="btn">Counter</button>
</form>

Er sagt mir aber das Counter nicht definiert ist.

[iMostLiked]

Eine Methode, wie du dein Vorhaben umsetzen könntest:

Gib jeder Form noch ein zusätzliches Element (unsichtbares Input-Feld) und speichere dort den Count. Alternativ könntest du es noch mit einem Array lösen, aber die Variante ist wohl "einfacher".

<form class="box-form">
    <button type="submit" class="btn">Counter</button>
    <input value="0" type="text" hidden>
</form>

$('.box-form button').click(function(){
    var nVal = parseInt($(this).next().val()) + 2;
    $(this).next().val(nVal);
});

Im Grunde genommen ist es ein Click-Event für jeden Button in einem Element mit der Klasse "box-form". Dort holt sich der Code mithilfe von die Value des Elementes "neben" dem Button und addiert eine Zahl drauf. Anschließend wird die Value im Input-Feld geändert.

PS: Nutz . Erleichtert dir dein Leben um einiges.
PPS: Hab den Code nicht getestet, müsste aber klappen. Das Prinzip sollte auf jeden Fall ersichtlich sein.

[type.]

Wahrscheinlich ist deine Variable 'counter' tatsächlich einfach nicht definiert.
Habe das einfach mal kurz zusammengeworfen; macht doch eigentlich genau das, was es soll, wenn ich dich richtig verstanden habe? M.M.n. gibt es, sofern es lediglich um eine solch simple Aufgabe geht, keinen Grund die komplette jQuery-Lib zu laden. ¯\_(ツ)_/¯

[Cc_Cc_Cc]

Ich möchte die Variable Counter noch per POST weitergeben.

z.b

SELECT * FROM comments LIMIT $counter;

Das ich dann immer weitere anzeigen kann.

Wenn ich jetzt, wie ihr unten bei "data: .. " sieht, counter einfüge, sagt er mir dass Counter nicht definiert ist. Ich habe nach (document).ready.. den Code von type. geschrieben. Es müsste doch dann schon deklariert sein oder nicht?

 Spoiler

PHP Code:

                $('.comment-form').submit(function(e) {
                    e.preventDefault()
                    
                    var btn = $(this).find('.show_comments')
                    var value = btn.val()
        
                    $.ajax({
                        type: 'POST',
                        url: 'show_comments.php',
                        data: {newid: value, newcommentscount: counter},
                        success: function(data) {
        
                            $('.comment-list-'+value+'').css('display', 'block')
                            $('.btn-con-'+value+'').css('display', 'block')
                            $('.comment-list-'+value+'').html(data)
                        }
                    })
                
                }) 


[iMostLiked]

Das liegt daran, dass du die Variable "counter" immer noch nicht definiert hast. (zumindest nicht global)
Wie auch immer, du kannst sie sowieso nicht übergeben, da in einer Variable nicht mehrere Werte reinpassen.

Wenn du für Block A einen Count von 44 hast und für Block B einen Count von 66, kann das nicht alles in "counter" addiert/gespeichert werden. (es sei denn du möchtest das)

Du musst dir den Count entweder über das Input-Feld (wenn du mein Beispiel nutzt) oder über das Span-Element (wenn du types Beispiel nutzt) holen.

[Cc_Cc_Cc]

Originally Posted by iMostLiked

Das liegt daran, dass du die Variable "counter" immer noch nicht definiert hast. (zumindest nicht global)
Wie auch immer, du kannst sie sowieso nicht übergeben, da in einer Variable nicht mehrere Werte reinpassen.

Wenn du für Block A einen Count von 44 hast und für Block B einen Count von 66, kann das nicht alles in "counter" addiert/gespeichert werden. (es sei denn du möchtest das)

Du musst dir den Count entweder über das Input-Feld (wenn du mein Beispiel nutzt) oder über das Span-Element (wenn du types Beispiel nutzt) holen.

Hi,

ich hab es mal so versucht, doch er nimmt es immernoch nicht +2.
Es kommt auch keine Fehlermeldung.
HTML:

 Spoiler

<form class="comment-form">
	<button type="submit" class="show_comments first-comment-<?= $rowsafe['beichtid']; ?>" value="<?php echo $rowsafe['beichtid']; ?>">Kommentare anzeigen</button>				
	<p><input type="hidden" name="counter counter-<?= $rowsafe['beichtid']; ?>" class="counter" value="0"></p>
</form>

Java:

 Spoiler

PHP Code:

                $('.comment-form').submit(function(e) {
                    e.preventDefault()
                    
                    var btn = $(this).find('.show_comments')
                    var value = btn.val()
                    
                    var btncounter = $(this).find('.counter')
                    var change = $(this).find('.counter-'+value+'')
                    var counter = btncounter.val()
                    
                    var nVal = parseInt(change.next().val()) + 2;
                    change.next().val(nVal);
        
                    $.ajax({
                        type: 'POST',
                        url: 'show_comments.php',
                        data: {newid: value, newcommentscount: counter},
                        success: function(data) {
        
                            $('.comment-list-'+value+'').css('display', 'block')
                            $('.btn-con-'+value+'').css('display', 'block')
                            $('.comment-list-'+value+'').html(data)
                        }
                    })
                
                }) 


[iMostLiked]

Ja, pass mal auf, du hast da bisschen was verwechselt und doppelt gemoppelt.

Du hast die .find() Funktion falsch genutzt. Wenn du in der Funktion selbst mit einem Punkt anfängst, selektierst du Klassen. (Mit einem Hashtag selektierst du IDs)

Dein

var change = $(this).find('.counter-'+value+'')

macht also keinen Sinn, da es keine Klasse, sondern ein name-Attribut ist. Selektieren musst du es so:

$(this).find('input[name="counter counter-'+value+'"]')

Das "input" brauchst du nicht. Kannst es alternativ auch so machen:

$(this).find('[name="counter counter-'+value+'"]')

Des Weiteren brauchst du das .next() nicht, da du als Haupt-Selektor (this) die Form und nicht den Button hast. Dadurch, dass du dich mit dem Selektor in der Form befindest, kannst du innerhalb dieser Form auf alles zugreifen, ohne .next() oder Ähnliches verwenden zu müssen.

Ansonsten war dein Ansatz ziemlich gut. Ich habe den Code für dich angepasst.
There you go: (Hab's mal in Spoiler gesetzt, falls du es noch selbst ausprobieren möchtest. )

 Spoiler

$('.comment-form').submit(function(e) {
    e.preventDefault();
    
    var value = $(this).find('.show_comments').val();

    var btncounter = $(this).find('input[name="counter counter-'+value+'"]');
    
    var nVal = parseInt(btncounter.val()) + 2;
    btncounter.val(nVal);

    var counter = btncounter.val();
});

Ach so, setz mal bitte Semikolons ans Ende der Zeilen.

PS: Die <p>-Tags brauchst du gar nicht. Das Input Feld ist sowieso unsichtbar.

[Cc_Cc_Cc]

Perfekt hat alles geklappt danke dir^^