Event Handler nacheinander

Question

Hallo zusammen,
mir wurde bisher immer großartig weitergeholfen, wenn ich das Support-Forum kontaktiert habe und ich hoffe, dass es jetzt wieder genau so ist :)

Ich habe zwei Event Handler direkt nacheinander programmiert, da die Antworten in zwei unterschiedlichen Fragen dazu führen, dass eine Folgefrage auf der gleichen Seite entweder aus- oder eingeblendet wird.

var dropdown = document.getElementById("BT25");  // Das Eingabefeld der Frage BT25
var textfeld = document.getElementById("BT06_01");  // offene Texteingabe anderer Inhalt
var optionMA = document.getElementById("BT08_01a");  // Option "JA"
var optionMB = document.getElementById("BT08_02a");  // Option "Nein"
var optionNA = document.getElementById("BT26_01a");  // Option "JA"
var optionNB = document.getElementById("BT26_02a");  // Option "Nein"
var frage1 = document.getElementById("BT26_qst");  // Die Frage BT26, die ein-/auszublenden ist
var frage2 = document.getElementById("BT07_qst");  // Die Frage BT07, die ein-/auszublenden ist
 
function toogle() {
  if (
    (dropdown && (dropdown.value != -9)) ||
    (textfeld && (textfeld.value.replace(/\s/g, "") != ""))
  ) {
      frage1.style.display = "none";
      frage2.style.display = "none";
  } else {
      frage1.style.display = "";
      frage2.style.display = "";
  }
}

if (dropdown) SoSciTools.attachEvent(dropdown, "change", toogle); 
if (dropdown) SoSciTools.attachEvent(dropdown, "click", toogle);  
if (textfeld) SoSciTools.attachEvent(textfeld, "keyup", toogle);
toogle();

function toogle1() {
  if (optionMA.checked)  {
    frage1.style.display = "none";
    frage2.style.display = "none";
  } else if ((optionMB.checked) && (optionNB.checked)) {
    frage2.style.display = "none";
 } else {
    frage1.style.display = "";
    frage2.style.display = "";
 }
}

// Die Funktion soll jedesmal ausgeführt werden, wenn eine der drei Optionen angeklickt wird
SoSciTools.attachEvent(optionMA, "click", toogle1);
SoSciTools.attachEvent(optionMB, "click", toogle1);
SoSciTools.attachEvent(optionNA, "click", toogle1);
SoSciTools.attachEvent(optionNB, "click", toogle1);
toogle1();

Wenn die Bedingung in Toogle() erfüllt ist, dann wird die Frage ausgeblendet. Wenn jedoch (optionMB.checked) in der if else Bedingung in toogle1() erfüllt ist, dann wird die zuvor ausgeblendete Frage kurzzeitig wieder eingeblendet, bis der Hacken bei (optionNB.checked) gesetzt wird.
Die Handler führen ihre Befehle also fehlerfrei aus.

Zu meiner konkreten Frage: Toogle() soll Toogle1() dominieren. Also immer wenn der erste Handler toogle() aktiv ist, dann soll der zweite programmierte Handler toogle 1 nicht aktiv werden, unabhängig davon, ob die Bedingungen erfüllt sind.

Ist es daher möglich im zweiten Event Handler eine weitere Bedingung einzubauen, die sich darauf bezieht, ob der erste Event Handler aktiv ist, bspw.

function toogle1() {
if ((optionMA.checked) && (not (toogle()))

Vielen Dank schon mal für die Unterstützung.

Answer 1

Sie schreiben es ja bereits selbst: Die beiden Event-Handler stehen in Konkurrenz (race condition). Deshalb wäre meine Empfehlung: Verwenden Sie nur eine Funktion, die dafür den kompletten Überblick hat. Diese wird dann bei jeder Änderung entweder am Dropdown oder bei den Optionen aufgerufen und sorgt für die richtige Darstellung. Aussehen könnte diese dann etwa wie folgt:

function toogle() {
  if (
    (dropdown && (dropdown.value != -9)) ||
    (textfeld && (textfeld.value.replace(/\s/g, "") != ""))
  ) {
      frage1.style.display = "none";
      frage2.style.display = "none";
  } else  if (optionMA.checked)  {
    frage1.style.display = "none";
    frage2.style.display = "none";
  } else if ((optionMB.checked) && (optionNB.checked)) {
    frage2.style.display = "none";
   } else {
    frage1.style.display = "";
    frage2.style.display = "";
 }
}