Bild in einer Gallerie anklicken und Index des angeklickten Bildes erhalten

    ich zeige am Bildschirm Bilder an. Der User soll eins der Bilder anklicken. Wie bekomme ich den Index des angeklickten Bildes?

    Programm Auszug:

    function loadPics()
    {
    for (var i = 0; i < 21; i++)
    {
    imgArray[i] = new Image();
    imgArray[i].src = 'ImageVerkehr/verk' + (i) + '.jpg';
    }
    }

    function showArray(zz,rr)
    {

    var gallerie = document.getElementById(rr);
    for (var i = 0; i < cardSelectBasic; i++)
    {
    gallerie.appendChild(imgArray[zz[i]]);
    }

    }

    function Start()
    {
    loadPics();
    showArray(randomNumberBasic,"ersteReihe");
    }

    Start();

    LG

    Joachim

    Um deinen Code vollständig zu verstehen, müsste man wissen, was randomNumberBasic ist. Ohne dies zu verstehen, kann ich folgende Lösung anbieten:

    for (var i = 0; i < cardSelectBasic; i++){
    var im = imgArray[zz[ i ]];
    gallerie.appendChild(im);
    im.addEventListener("click", function(idx) {
    return function() {
    // Hier steht der Index unter idx zur Verfügung
    };
    }(i));
    }[/code]


    Normaler Weise müsste man Code-Tags verwenden, aber leider funktionieren diese in diesem Forum nicht richtig.

    Herzlichen Dank. Funktioniert wie gewohnt.

    wenn jetzt ein Bild angeklickt wurde, möchte ich die Bilder blockieren, nicht-klickbar machen.

    ich habe es mit:

    im.setAttribute("data-locked", "true");

    rum probbiert, aber das klappt nicht.

    und dann sofort die zweite Frage dazu:

    wie mach ich sie später wieder sichtbar?
    irgendwas mit

    im.setAttribute("data-locked", "false"); ????????????????

    Anmerkung zu deiner Frage :

    randomNumberBasic ist ein Array gefüllt mit zufallszahlen.

    LG
    Joachim
    Joachim

    'ich habe es mit:
    im.setAttribute("data-locked", "true");
    rum probbiert, aber das klappt nicht.'

    Das ist schon ein richtiger Ansatz. Poste mal deinen Code, damit man sich ansehen kann, warum es nicht funktioniert.

    'wie mach ich sie später wieder sichtbar?
    irgendwas mit im.setAttribute("data-locked", "false"); ?'
    Auch das ist ein richtiger Ansatz. Alternativ könntest Du auch das Attribut mit removeAttribute löschen.

    Kommt mir irgend wie bekannt vor, hattest Du so ein Thema schon Mal?

    Gutes Gedächnis. Dass hattest du mir schon mal gezeigt bei einem Zugriff auf ein table.
    Da hat es funktioniert,

    function showArray2(zz,rr)
    {

    var gallerie = document.getElementById(rr);
    for (var i = 0; i < randomNumberCompare.length; i++)
    {
    var im = imgArray[zz[ i ]];
    gallerie.appendChild(im);


    im.addEventListener("click", function(idx) { return function()

    {
    im.setAttribute("data-locked", "true");

    if (vergleichccr==idx)
    {


    randomNumberBasic.splice(vergleichcbr,1);


    }
    else
    {
    alert("war nichts");
    }


    };
    }(i));

    }

    }

    Wenn Du solch ein Attribute setzt, musst Du es auch auswerten. Vermutlich ist dies, was Du brauchst:


    function showArray2(zz,rr)
    {

    var gallerie = document.getElementById(rr);
    for (var i = 0; i < randomNumberCompare.length; i++)
    {
    var im = imgArray[zz[ i ]];
    gallerie.appendChild(im);


    im.addEventListener("click", function(idx) { return function()

    {
    if (!im.getAttribute("data-locked") {
    im.setAttribute("data-locked", "true");

    if (vergleichccr==idx)
    {


    randomNumberBasic.splice(vergleichcbr,1);


    }
    else
    {
    alert("war nichts");
    }
    }

    };
    }(i));

    }

    }

    Außerdem: Habe ich dich richtig verstanden, dass Du alle Bilder sperren möchtest? Wenn ja, ist es so nicht ausreichend, sondern du musst in einer Schleife über alle Bilder das Attribut setzen.

    Ich hab noch Klamern hinzugefügt. dann läuft es von der Syntax her. Blockiert wird aber nichts.

    Ich möchte alle Bilder blocken. Wie sprech ich dann im.setAttribute("data-locked", "true") an.

    Wie bring ich da den index aus der Schleife for (i=.....
    rein.

    function showArray2(zz,rr)
    {

    var gallerie = document.getElementById(rr);
    for (var i = 0; i < randomNumberCompare.length; i++)
    {
    var im = imgArray[zz[ i ]];
    gallerie.appendChild(im);


    im.addEventListener("click", function(idx) { return function()
    {
    if (!im.getAttribute("data-locked")) {
    im.setAttribute("data-locked", "true"); }

    if (vergleichccr==idx)
    {
    randomNumberBasic.splice(vergleichcbr,1);
    alert(randomNumberBasic + "bravo"+ vergleichcbr);
    }
    else
    {
    alert("kein bravo");
    }


    };
    }(i));
    }
    prepare();
    }

    Wenn Du alle Bilder blocken möchtest, empfehle ich, das Attribut bei dem gallerie-Element zu setzen:

    for (var i = 0; i < cardSelectBasic; i++){
    var im = imgArray[zz[ i ]];
    gallerie.appendChild(im);
    im.addEventListener("click", function(idx) {
    return function() {
    if (!gallerie.getAttribute("data-locked")) {
    gallerie.setAttribute("data-locked", "true"); }

    if (vergleichccr==idx)
    {
    randomNumberBasic.splice(vergleichcbr,1);
    alert(randomNumberBasic + "bravo"+ vergleichcbr);
    }
    else
    {
    alert("kein bravo");
    }};
    }(i));
    }

    Das beste wäre, wenn Du deine Seite online hättest und die URL posten würdest. Geht das nicht, dann den vollständigen Code einschl. HTML bei pastebin.com hochladen und die URL dort posten. Bitte nicht hier im Forum posten wegen der Problem mit Codetags.

    Verstehe ich nicht warum das nur privat ist.
    habe versucht es zu ändern.
    Gebe für heute auf.
    Mir brummt der Schädel.
    Bin frustriert.

    Ich versuche es morgen weiter, Erstmal Dank für deine Mühen.

    Joachim

    Leider habe ich dir da einen Code mit einem Strukturfehler gegeben:

    im.addEventListener("click", function(idx) {
    return function() {
    if (!gallerie.getAttribute("data-locked")) {
    gallerie.setAttribute("data-locked", "true");
    }

    playSound();
    if (vergleichccr == idx) {

    control.value = "Das war richtig. Klicke jetzt den Button WEITER";
    } else {
    control.value = "Das war falsch. Beginne wieder mit Start";
    }
    };


    }(i));

    Das if wird gleich nach der ersten Anweisung wieder geschlossen. So wäre es richtig:
    http://pastebin.com/g4r4jJG0

    2 Mal editiert, zuletzt von Sempervivum (10. März 2017 um 17:01)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden