Wie kann unterschiedliche Zeiten in Internen Variablen abspeichern?

Question

Hallo,

Das folgende Script speichert die Zeit pro Klick in verschiedenen Variablen ab, allerdings wird in jeder Internen Variable die gleiche Zeit abgespeichert.
Ich kann leider nicht erkennen, ob es sich um einen Syntaxfehler handelt, oder ich etwas falsch interpretiert bzw. eingebaut habe.

Das Ziel wäre, in jeder internen Variable die Zeit des letzten Klick auf eine 3er Gruppe von Wörtern zu speichern [wort1, wort2, wort3] => eine Zeit wird gespeichert, wenn ein Wort ausgewählt wird

Die Fehlerconsole meldet zudem keine weiteren Fehler.

Nochmal als Hilfe das komplette Script:

<script>

var date0 = new Date();

function storeTime(intID) {
  var now = new Date();
  var diffTS = now.getTime() - date0.getTime();
  document.getElementById(intID).value = diffTS.toString();
}

</script>

<script>

"use strict";
console.clear();

void function(d,w) {
  const className = 'click-react';
  const highlightClassName = 'click-highlight'
  
  Array.from(d.getElementsByClassName(className)).forEach(el => {
    const words = el.innerText.split(/\s+/);
    const wordsMapped = words.map(i => `<span data-click>${i}</span>`)
    el.innerHTML = wordsMapped.join(' ');
  })
  
  d.addEventListener('click', e => {
    if (!e.target.hasAttribute('data-click')) {return false}
    const container = e.target.closest(`.${className}`)
    if (!container) {return false}
    
    
    Array.from(container.getElementsByClassName(highlightClassName))
      .forEach(el => el.classList.remove(highlightClassName))
    e.target.classList.add(highlightClassName);

    storeTime("SM03_01");
    storeTime("SM03_02");
    storeTime("SM03_03");
    storeTime("SM03_04");
    storeTime("SM03_05");

    d.getElementById(container.getAttribute('data-input-id')).value = e.target.innerText
    
  })
  
}(document, window);


</script>

<style>
span.click-highlight {
  background-color: CornflowerBlue;
}

div.GanzerText {

     counter-reset: custom-counter;

        
}

div.click-react {

        display:inline;
        text-align: justify
        

}

</style>

Edit:
Eine Vermutung, die mir gerade gekommen ist:
Ich verwende auch einen Countdown auf allen Seiten. Dieser verwendet ebenso die Variable var date0. Dieses Script liegt zwischen den beiden Scripten die ich gepostet habe. Kann es sein das die Variable des Countdown und der function storeTime überschreiben?

Answer 1

Sie verwenden diesen Block:

storeTime("SM03_01");
storeTime("SM03_02");
storeTime("SM03_03");
storeTime("SM03_04");
storeTime("SM03_05");

Dieser ist dafür verantwortlich, dass in allen Variablen derselbe Wert gespeichert wird.

Ihr Code muss dafür sorgen, dass für jeden Klick die richtige Variable verwendet wird. Wenn Sie z.B. beim ersten Klick in SM03_01 speichern möchten und beim nächsten in SM03_02, dann benötigen Sie außerhalb des click-Handlers eine Zählvariable (z.B. var clickCount=0) und würden dann im click-Handler schreiben.

clickCount++;
if (clickCount <= 5) {
  storeTime("SM03_0" + clickCount);
}

Comments

Danke für Ihre Hilfe. Das ist allerdings noch nicht ganz was ich brauche.

Das Problem ist, dass eine Zeitvariable direkt einem Feld zuzuordnen sein muss.
Falls ein Teilnehmer sich nach 5 Klicks bei Feld Nummer 1 umentscheidet, müsste eine Zeitvariable für dieses Feld Nummer 1 die Änderung mit einer neuen Zeit registrieren.

Ich denke aber, dass die Aufgabe das Format des Forums etwas sprengt (Was denken Sie?). Vielleicht kann ich Ihnen dazu noch einmal eine Email schreiben, mit etwas mehr Kontext. Falls eine Umsetzung mit etwas Zeitaufwand möglich ist, könnte ich auch
ein paar Seiten für die SoSci Dokumentation in das Englische Übersetzen.

Viele Grüße

---

> Falls ein Teilnehmer sich nach 5 Klicks bei Feld Nummer 1 umentscheidet, müsste eine Zeitvariable für dieses Feld Nummer 1 die Änderung mit einer neuen Zeit registrieren.

Dann können Sie in Ihrem Code ja ermitteln, aus welchem Feld der Klick stammt. Verwenden Sie dann einfach die zugehörige Variable.

Soweit ich es beurteilen kann, ist der ursprüngliche Code für die Markierung sehr "dicht" geschrieben und entsprechend schwer zu lesen. Vermutlich muss man dort einfach noch ein wenig auflockern und in JS-Klassen kapseln.

> Falls eine Umsetzung mit etwas Zeitaufwand möglich ist, könnte ich auch
ein paar Seiten für die SoSci Dokumentation in das Englische Übersetzen.

Das klingt nach einem pragmatischen Deal :)