Beiträge von Jochen

  • Bestehende Bilder ersetzen

    Ich gebe Bilder aus bei dem Anklicken eines Buttons. Jetzt möchte ich beim Klicken eines zweiten Buttons diese Bilder durch andere ersetzen.
    Bei meinem Test - Programm werden die alten Bilder nicht ersetzt, die neuen werden angefügt.


    Wie kann ich sie ersetzen?


    <!DOCTYPE html>
    <html>
    <script>



    var imgArray = [];
    var vorgabe=5;
    var zw=[1,1,1];


    for (i = 0; i < 20; i++) {
    imgArray[i] = new Image();
    imgArray[i].src = 'ImageVerkehr/verk' + (i+1) + '.jpg';
    }
    function showArray1() {
    var zw=[1,19,18,17,15];
    var gallerie = document.getElementById("ersteReihe");
    for (i = 0; i < vorgabe; i++) {
    gallerie.appendChild(imgArray[zw[i]]);
    }
    }
    function showArray2() {
    var zw=[1,2,3,4,5];
    var gallerie = document.getElementById("ersteReihe");
    for (i = 0; i < vorgabe; i++) {
    gallerie.appendChild(imgArray[zw[i]]);
    }
    }
    </script>
    <body>


    <button onclick='showArray1()' id="btnnr1" >Category 1</button>
    <button onclick='showArray2()' id="btnnr2" >Category 2</button>
    <div id='ersteReihe'></div>
    </body>
    </html>

  • Bild in einer Gallerie anklicken und Index des angeklickten Bildes erhalten

    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();
    }

  • Bild in einer Gallerie anklicken und Index des angeklickten Bildes erhalten

    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));


    }


    }

  • Bild in einer Gallerie anklicken und Index des angeklickten Bildes erhalten

    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

  • 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

  • Zeitverzögerung in der Ausgabe

    Mein HERZLICHEN Dank an Jav und Semper. Ich habe viel gelernt. Für Interessierte der Code, der genau das bringt was ich möchte.




    <!DOCTYPE html>
    <html>
    <head>
    <style>
    td{font-size:40px; padding:4px 10px;}
    </style>
    <script>
    var blinkColors = new Array('red', 'white','red', 'white' );
    var zw= new Array(2,3,7,8);
    var selectCell = 5;
    var blinkColor = 0;
    var iterator = 0;


    var myBlink = setInterval(function() {
    doBlink();
    }, 1300);


    function doBlink() {


    var blinkCell = document.getElementById('blinker' +zw[iterator] );


    blinkCell.style.backgroundColor = blinkColors[blinkColor];
    blinkColor++;


    if (blinkColor == blinkColors.length) {
    blinkColor = 0;
    blinkCell.style.backgroundColor = "transparent";
    iterator++;


    if (iterator == selectCell)
    clearInterval(myBlink);
    else
    doBlink(zw[iterator]);
    }


    }
    function random(max)
    {
    return Math.floor((Math.random() *max) + 1);
    }
    </script>
    </head>
    <body>


    <table border="1">
    <tr>
    <td id="blinker0"> A </td><td id="blinker1"> B </td><td id = "blinker2"> C </td>
    </tr>
    <tr>
    <td id="blinker3"> D </td><td id="blinker4"> E </td><td id = "blinker5"> F </td>
    </tr>
    <tr>
    <td id="blinker6"> G </td><td id="blinker7"> H </td><td id = "blinker8"> I </td>
    </tr>
    </table>
    <br>


    </body>
    </html>

  • Zeitverzögerung in der Ausgabe

    Ich möchte auf die"einfache" vorherige Lösungsidee zurückkommen.


    Warum wird die Farbsequenz bei anzahlFelder = 0 in der If Abfrage einmal gebracht, bei anzahlFelder > 0 passiert nichts? Ich möchte die Farbsequenz lt array blinkFarben anzahlFelder ot wiederholen


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    td{font-size:40px; padding:4px 10px;}
    </style>
    <script>


    var blinkFarben=new Array('red','white','red','white','red','white','red','white');
    var anzahlFelder = 1;


    for (var i = 0; i <=anzahlFelder; i++)


    {

    var blinkFarbe=0;


    var myBlink=setInterval(function(){doBlink();},300);



    }
    function doBlink()
    {
    var blinkende=document.getElementById('blinker');
    blinkende.style.backgroundColor=blinkFarben[blinkFarbe];
    blinkFarbe++;
    if(blinkFarbe==blinkFarben.length)
    {
    stopBlink();
    }
    }


    function stopBlink()
    {
    clearInterval(myBlink);
    }


    </script>
    </head>
    <body>


    <table border="1">
    <tr>
    <td> A </td><td> B </td><td> C </td>
    </tr>
    <tr>
    <td> D </td><td id="blinker"> E </td><td> F </td>
    </tr>
    <tr>
    <td> G </td><td> H </td><td> I </td>
    </tr>
    </table>
    <br>


    </body>
    </html>

  • Zeitverzögerung in der Ausgabe

    Ich hatte mich für die setInterval Lösung entschieden. Ist einleuchtend und leicht manipulierbar. Dachte ich . Ich bekomme es nicht hin.



    1.) Nur wenn ich das alert Statement in der Funktion habe bringt er die Farbe in die Zelle.


    2.) Der Code funktioniert auch nur dann für i = 1 . Die Schleife wird nicht durchlaufen.


    function VorgabeZahlErmitteln(z,s)
    {
    var blinkFarben=new Array('blue','white','red','white','red', 'white');
    var myBlink;


    for (var i = 0; i <= anzahlFelder-1; i++)


    {
    var blinkFarbe=0;


    var zindex=random(z-1);
    var sindex=random(s-1);


    indexZelleVorgabe[i]=zindex;
    indexSpalteVorgabe[i]=sindex;
    var zw= (zindex*anzahlSpalten)+sindex;


    myBlink=setInterval(function(){doBlink(zw);},300);



    function doBlink(zwzw)
    {


    var ind=zwzw;
    var blinkende=document.getElementsByTagName('td');
    blinkende[ind].style.backgroundColor=blinkFarben[blinkFarbe];
    blinkFarbe++;
    alert(blinkFarbe);
    if(blinkFarbe>5)
    {
    clearInterval(myBlink);
    }
    }
    }
    }
    l

  • Zeitverzögerung in der Ausgabe

    Das Staement


    setTimeout(function(zwzw) {return function() {bringColor(zwzw);}}(zw), 1000 * (i + 1));


    funktioniert ( Danke Sempervivum)


    Die ausgesuchten Zellen erhalten die neue Farbe. Soweit sehr schön.


    Jetzt möchte ich, dass die einzelne Zelle ein Sekunde lang die neue Farbe hat und dann wieder die ursprünglichre Farbe erhält.


    Ich habe gedacht ich könnte es machen mit


    setTimeout(function(zwzw) {return function() {bringColorNeu(zwzw);}}(zw), 1000 * (i + 1));
    setTimeout(function(zwzw) {return function() {bringColorAlt(zwzw);}}(zw), 1000 * (i + 1));


    Das funktioniert nicht weil die erste Timeout Anweisung mit bringColorNeu übersprungen wird??????
    Es wird sofort die Funktion bringColorAlt() aktiv.


    Optimal wäre es für mein Vorhaben.


    Es wird mit Verzögerung die neue Farbe in die einzelne Zelle gebracht.
    also
    setTimeout(function(zwzw) {return function() {bringColorNeu(zwzw);}}(zw), 1000 * (i + 1));


    dann blinkt die Zelle:


    mittels Anzeigen


    neue Farbe
    alte Farbe
    neue Farbe
    alte Farbe
    neue Farbe
    alte Farbe


    Also eine Schleife mit alter/neuerFarbe.





    und dann Dann


    Dann


    Verstehe ich nicht. Ich dachte es wird sequentiell abgearbeitet. Wie ist das zu ändern?

  • Zeitverzögerung in der Ausgabe

    Ich möchte zwischen dem farbigen Anzeigen von Zellen einer Tabellen eine Zeitverzögerung damit man sich die angezeigten Tabellen merken kann.


    in dem folgenden Code kommt es zu keiner Zeitverzögerung. Es werden alle ausgewählten Tabellen gleichzeitig angezeigt.


    Und obwohl der Wert für anzahlFelder gleich 4 ist werden nur 3 Felder angezeigt und nicht 4.


    Dank vorab und eine schöne Woche


    Joachim



    function VorgabeZahlErmitteln(z,s){


    for (var i = 0; i <= anzahlFelder-1; i++)


    {
    var zindex=random(z-1);
    var sindex=random(s-1);


    indexZelleVorgabe[i]=zindex;
    indexSpalteVorgabe[i]=sindex;
    var zw= (zindex*anzahlSpalten)+sindex;


    setTimeout( bringColor(zw), 1000);
    }


    }


    function bringColor(x){


    var ind=x;
    var tds=document.getElementsByTagName('td');
    tds[ind].style.backgroundColor="#00FF00";
    }

  • Zelle einer Tabelle mit Bilde füllen

    mit dem Click in der Funktion createTable funktioniert es mittels
    this.src = "augeRot.gif";
    bringt die Bilder (Danke Semervivum)


    Wenn ich jetzt von einer anderen Funktion aus ein Bild reinbringen möchte habe ich es versucht mitt :


    document.getElementById('tabelle1').rows[sindex].cells[zindex].src= "augeRed.gif";


    oder


    document.getElementById('tabelle1').rows[sindex].cells[zindex].style.backgroundImage= "augeRed.gif";


    Es bringt es nicht. Was ist richtig?


    LG


    Joachim