Beim Klick auf erstellten Button passiert nichts

Question

Hallo,

ich habe ein Array erstellt, aufgrund dessen eigentlich beim Klick auf den Senden Button beim ersten Klick Frage VD01, beim zweiten VD03, dritten VD05, vierten VD07 erscheinen sollen. Davor habe ich diese Fragen zuerst ausgeblendet. Leider passiert aber beim Klicken auf den Button gar nichts. Liegt der Fehler in meiner Funktion zum Einblenden?

Nachfolgend der Code:

<script type="text/javascript">

SoSciTools.attachEvent(window, "DOMContentLoaded",
  function() {
     var VD01= document.getElementById("VD01_qst");
     VD01.style.display = "none";
     }
);

SoSciTools.attachEvent(window, "DOMContentLoaded",
  function() {
    var VD03= document.getElementById("VD03_qst");
    VD03.style.display = "none";
  }
);

SoSciTools.attachEvent(window, "DOMContentLoaded",
  function() {
    var VD05= document.getElementById("VD05_qst");
    VD05.style.display = "none";
  }
);

SoSciTools.attachEvent(window, "DOMContentLoaded",
  function() {
    var VD07= document.getElementById("VD07_qst");
    VD07.style.display = "none";
  }
);
</script>

<script type="text/javascript">

var frage = -1;

SoSciTools.attachEvent(next, "click", buttonClicked)

function buttonClicked(){
  frage++;
  var fragen = [
    "VD01","VD03","VD05","VD07"
  ];
  var elem = document.getElementById(fragen[frage] + "_qst");
  fadeIn(elem, 1000);
}

function fadeIn( elem, ms )
{
  if( ! elem )
    return;

  elem.style.opacity = 0;
  elem.style.filter = "alpha(opacity=0)";
  elem.style.display = "inline-block";
  elem.style.visibility = "visible";

  if( ms )
  {
    var opacity = 0;
    var timer = setInterval( function() {
      opacity += 50 / ms;
      if( opacity >= 1 )
      {
        clearInterval(timer);
        opacity = 1;
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 );
  }
  else
  {
    elem.style.opacity = 1;
    elem.style.filter = "alpha(opacity=1)";
  }
 
});


var next= document.getElementById("nextOne");

</script>


<button type="button" id="nextOne" >Senden</button>

Answer 1

Sie schreiben im (zweiten) Script zu Beginn:

SoSciTools.attachEvent(next, "click", buttonClicked)

Aber die Variable "next" definieren Sie erst viel später:

var next= document.getElementById("nextOne");

So kann das attachEvent() oben nicht funktionieren.

Noch ein paar weitere Tipps zum Code:

Wenn Sie das Array mit den Frage-Kennungen auf die oberste Script-Ebene legen ("globale Variable"), dann können Sie es auch gleich zum Ausblenden verwenden.

SoSciTools.attachEvent(window, "DOMContentLoaded", function() {
    for  (var i=0; i<fragen.length; i++) {
        document.getElementById(frage[i] + "qst").style.display = "none";
    }
);

Und wenn Sie den Code einfach unten auf die Seite packen (unter die Fragen), dann können Sie auf das "DOMContentLoaded" verzichten:

for  (var i=0; i<fragen.length; i++) {
    document.getElementById(frage[i] + "qst").style.display = "none";
}