Zähler pro Klick

Question

Hallo,

ich habe eine Folgefrage zum Zähler für Klicks pro Button:
https://support.soscisurvey.de/?qa=23812/button-counter-fur-den-ganzen-fragebogen

Ich habe zum Beispiel auf einer Seite zwei Buttons, die mit folgendem Code dargestellt werden

<table><td style="padding:0 10px 0 0;"><a type="button" value="Play" id="counter" onclick="responsiveVoice.speak('Wie alt sind Sie?','Deutsch Female');"><img src="TTS.png"></a></td><td>Wie alt sind Sie?</td></table>

<table><td style="padding:0 10px 0 0;"><a type="button" value="Play" id="counter" onclick="responsiveVoice.speak('Bitte tragen Sie Ihr Alter in das Feld ein.','Deutsch Female');"><img src="TTS.png"></a></td><td>Bitte tragen Sie Ihr Alter in das Feld ein.</td></table>

Jetzt sollen die Klicks gezählt werden, wie oft der Text to Speech Button pro Seite und Nutzer angewendet wurde. Mein vorgehen war folgendes:

1. Erstellen einer interenen Variable XX20_01. Die wurde ganz oben auf der gleichen Seite plaziert.

2. Erstellen eines Textbausteins mit dem folgenden Code.

            var zähler = document.getElementsById("counter");
            
            on(zähler, "click", function(){
                count = count +1;
            });
            
           
            var input = document.getElementById("XX20_01");
            
            
            input.value = count;
        
            

Das Problem:
Die gezählten Klicks landen nicht in der internen Variable. Ich denke, ich habe auch irgendetwas durcheinander gebracht, bin aber nicht sicher, wo genau das Problem liegt (Meine js Kenntnisse sind fast nicht vorhanden...)

Comments

Sind Sie sicher, dass es eine Funktion on() gibt und dass diese browserübergreifend funktioniert?

Generell müsste das Übertragen des gezählten Wertes in die interne Variable, also die Zeile

input.value = count;

nach jeder Änderung aufgerufen werden. Daher auch meine frühere Empfehlung, dass Sie sich am JavaScript-Code folgender Anleitung orientieren: https://www.soscisurvey.de/help/doku.php/de:create:break-counter

---

Der Code aktiviert den Zähler, sobald ich einen Klick aus dem Fragebogen heraus mache . Ich würde gerne die Klicks auf die Buttons zählen. Den Teil
SoSciTools.attachEvent(window, "blur", countBlur);
habe ich so angepasst:
document.getElementById("counter").addEventListener("click",  countBlur);

Jedoch ohne Erfolg bisher. Ich denke, der Verweis auf die ID der Buttons ist falsch.
document.addEventListener("click",  countBlur) Hier funktioniert der Zähler nämlich, allerdings für jeden Klick auf der Seite.

---

> Der Code aktiviert den Zähler, sobald ich einen Klick aus dem Fragebogen heraus mache . Ich würde gerne die Klicks auf die Buttons zählen

Schon klar ... den Trigger haben Sie m.E. korrekt angepasst.

> Jedoch ohne Erfolg bisher. Ich denke, der Verweis auf die ID der Buttons ist falsch.

Schwer zu beurteilen. Möchten Sie vielleicht mal einen Pretest-Link direkt (!) zu der betroffenen Fragebogen-Seite posten? Dann sehe ich Ihren HTML-Code.

---

gerne: https://ofb.iea-hamburg.de/KTN/?act=rliRmx1vO6rWMNU8T2Danzxj

Hier gibt SoSci auch das erste Mal eine Fehler an.
Den gab es bei dem normalen Aufrufen des Ofb nicht.Die Fehler zu langbutton und $sprachanzeige können Sie in diesem Fall ignorieren.

Edit: Beim zweiten Button funktioniert der Zähler, beim dritten nicht. Ich habe dafür das Script ans Ende der Seite gesetzt, statt, wie im Forum beschrieben, direkt nach der internen Variable.

Answer 1

Problem gelößt:

<script type="text/javascript">

function blurCount(inputID) {
  var input = document.getElementById(inputID);
  if (!input) {
    alert("Fehler: Interne Variable " + inputID + " ist auf der Seite nicht verfügbar!");
    return;
  }
 
  // Initialisierung (Wert: 0)
  if (isNaN(parseInt(input.value))) {
    input.value = 0;
  }
 
  // Funktion, die beim Verlassen des Fenster aufgerufen wird
  function countBlur(evt) {
    var val = parseInt(input.value);
    input.value = val + 1;
  }

  // Zählung für jedes Verlassen des Fensters aktivieren
 
var bttn = document.getElementsByClassName("counter");
 
 for(var i = 0; i < bttn.length; i++) {
      bttn[i].addEventListener("click",  countBlur)
  }

}

 
// Zähler aktivieren
blurCount("XX20_01");
 

</script>

keine ID vergeben, sondern eine Klasse (Class). Die Klasse wird in einem Array abgespeichert. Durch diesen muss dann eine Schleife laufen um alle Button zu erreichen.

for(var i = 0; i < bttn.length; i++) {
      bttn[i].addEventListener("click",  countBlur)
  }

Jetzt müsste nur noch der letzte Teil blurCount("XX20_01"); variabel gestaltet werden, sodass ich nur ein Script Textbaustein brauche und dieser nicht bei jeder Seite umgeschrieben werden muss.