Beiträge von Jochen

    Funktioniert nicht.


    Ich meine der Ausdruck #bl' +zw[i] + ' img').src

    kann nicht gefunden werden Das Event wird ausgelöst durch


    <tr>

    <td id = "bl0" onclick="hitColor('bl0')"></td>

    <td id = "bl1" onclick="hitColor('bl1')"></td>

    <td id = "bl2" onclick="hitColor('bl2')"></td>

    <td id = "bl3" onclick="hitColor('bl3')"></td>

    ,,,,

    ,,,,


    function hitColor(blink){



    if (document.getElementById(bl).id==('bl' + zw[0]) )

    {

    document.getElementById('bl' +zw[0]).childNodes[0].src = "Mueder Feind1.jpg";


    ZaehlTreffer(0)


    }

    if (document.getElementById(bl).id==('bl' + zw[1]) )

    {

    ...

    ....

    Und


    EIN SCHÖNES 2018 wünsche ich dir. Hast mir oft geholfen in 2017.


    DANKE

    Ich könnte das gesamte Programm schicken, aber da wirst du bei meinen Programmierkünsten nicht durchblicken.

    Ich habe hier das dargestellt was ich mit den Bildern mache,


    Die Funktion ZeigNeueBilfder bringt wie gewünscht die Bilder.


    Mit der Anweisung

    document.getElementById('bl' +zw[0]).childNodes[0].src = "Mueder Feind1.jpg";

    bekomme ich die Bilder geändert.


    Wenn ich jetzt die geänderten Bilder mit der Funktion ZeigNeueBilder zurücksetzen will , dann passiert nichts. Das Bild (Beispiel)" MuederFeind" bleibt und wird nicht durch 'img' + (i+1)' ersetzt.

    Wahrscheinlich muss ich mit remove oder replace arbeiten. Aber das bekomme ich nicht hin. ,

    In einem Programm zeige ich in einem table Bider an. Ich veränder sie temporär und möchte dann wieder die alten Bilder herstellen.


    Das Zurücksetzen klappt nicht, es werden immer die geänderten Bilder gezeigt.


    Auszug aus dem Programm


    INITIALISIERE BILDER

    var images = {};

    images.img1 = new Image();

    images.img2 = new Image();

    images.img3 = new Image();



    images.img1.src = "Terrorist1.jpg";

    images.img2.src = "Terrorist2.jpg";

    images.img3.src = "Terrorist3.jpg";


    WEISE SIE ZU


    function ZeigNeueBilder()

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

    document.getElementById('bl' +zw[i]).appendChild(images['img' + (i+1)]);

    } }


    VERÄNDERE MIT

    document.getElementById('bl' +zw[0]).childNodes[0].src = "Mueder Feind1.jpg";


    Wenn ich dann die Funktion ZeigNeueBilder wieder audrufe, verändert sich nichts.

    Das Bild "muder Feind" bleibt.


    Dank vorab


    Jochen

    Ja, die Objekte wie gezeigt angelegt.


    Wenn ich schreibe:


    document.getElementById('bl' +zw[i]).appendChild(img1) zum Beispiel,


    dann funktioniert es auch. Nur dann nicht, wenn ich es mit ('img' + (i+1)) zusammenbaue, dann kommt die fehlermeldung

    Danke funktioniert . Ich habe 20 bilder, die ich indiziert habe von Bild1 bis bild 20 .


    wenn ich jetzt schreibe


    var z=('img' + (i+1));


    document.getElementById('bl' +zw[i]).appendChild(z);


    bekomme ich die Fehlermeldung


    TypeError: Argument 1 of Node.appendChild is not an object.

    Mit

    document.getElementById('bl' +zw[1]).style.backgroundColor = "red";


    gestalte ich die Hintergrundfarbe eines Tabellen Elements. Jetzt möchte ich aber Bilder einfügen. ich versuche es mit


    document.getElementById('bl' +zw[1]).src ="augeGruen.gif";


    Das klappt nicht. Es passiert nichts.


    MfG


    jochen

    Ich möchte ein Säulendiagramm erstellen. Es klappt bis auf die Höhe der Balken.


    Die Balken werden bei 100 abgeschnitten. Warum?
    Zusatzfrage: Wie könnte ich die y Achse beschriften? Oder geht das nicht?


    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>


    <script>
    function showBar(){
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";



    var values= [66, 77, 88, 99, 111, 85, 70, 90, 50, 105, 120, 75, 83, 110];
    var distance = 10;
    var maxheight = 140;
    var barwidth= 400 /values.length - distance;


    for(var i = 0; i < values.length; i++)
    {


    ctx.fillRect(barwidth * i + distance * i, maxheight - maxheight * values[i] / 100, barwidth, maxheight * values[i] / 100);
    }
    }


    showBar();
    </script>


    </body>
    </html>

    Guten Morgen Sempervivum,


    ich habe ein einfaches Beispiel für ein typisches Layout meiner kleinen Anwendungen bei pastebin eingestellt.
    Es ist total mit position absolut aufgebaut. Da erkennst du meine Ziele vielleicht einfacher als wenn ich alles verbal beschreiben würde.


    Vielleicht kannst du mir an diesem Beispiel zeigen wie man "heutzutage" so etwas programmiert.
    Wenn es zuviel Arbeit ist kann ich verstehen wenn du lieber den Sonnenschewin geniesst


    LG


    Joachim


    http://pastebin.com/zz7LQKjG

    meineFfragen beziehen sich somit auf der Positionierung innerhalb des outer wrappers. wie positioniere ich z.b. einen Text an eine bestimmte Stelle im outer wrapper


    und wie schiebe ich den inner wrapper nach links und rechts (state of the art)?

    Ich habe das Ganze noch in einen Wrapper gepackt.
    Die Höhen- Position bestimme ich mit dem height (Y achse) im outerwrapper.
    wie lege ich die Position auf der x achse? fest.


    Und wenn ich jetzt zum Beipiel 200 px unter dem Outerwraper einen Text haben möchte, mach ich das neuerdings auch noch mit margin-top oder Position absolut oder gibt es etwas "moderneres"





    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #wrapper {


    width:1050px;
    height:650px;
    border: 1px solid blue;
    margin: 5px;
    position:relative;
    }


    #outerwrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    left:200vh;
    }
    #innerwrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    }


    </style>



    </head>



    <body>
    <div id="wrapper">
    <div id="outerwrapper">
    <div id="innerwrapper">
    </div>
    </div>
    </div>
    <script>
    for (var i = 0; i < 3; i++) {
    var currentlineimg = document.createElement("div");
    currentlineimg.className = "lineimg";
    for (var j = 0; j < 5; j++) {
    var im = document.createElement("img");
    im.src = "http://lorempixel.com/output/animals-q-c-50-50-" + (j+1) + ".jpg"
    currentlineimg.append(im);
    }
    innerwrapper.append(currentlineimg);
    var currentlinebtn = document.createElement("div");
    currentlinebtn.className = "linebtn";
    for (var j = 0; j < 5; j++) {
    var btn = document.createElement("button");
    btn.innerHTML = "BTN" + (i * 10 + j + 1);
    currentlinebtn.append(btn);
    }
    innerwrapper.append(currentlinebtn);
    }


    </script>
    </body>
    </html>

    ch habe es mir angesehen: Ist gut. Aber wie bekomme ich die Buttons mit Flexbox in die gewünschte Position.


    ich möchte eine Reihe Bilder anzeigen,
    dann 10 Buttons


    dann eine Reihe Bilder
    dann 10 Buttons


    eine Reihe Bilder
    dann 10 buttons


    Statt der Bilder kann es hier auch eine Textzeile jeweils sein.

    Ich entnehme den Kommentaren BEIDER Fachleiute, dass Position absolut anscheinend nicht mehr state of the art ist.


    Vielleicht sollte da mal einer bei Youtube ein entsprechendes Video auflegen.Da habe ich anscheinend stundenlang Antiquitäten geschaut.


    Bevor ich wieder das falsche Video schau oder veraltete Tutorials studiere, könnte mir einer an meinem Beispiel zeigen wie man die optimal Buttons in die Mitte vom wrapper bekommt?


    LG


    Joachim

    in der Anwendung - hier ist nur ein vereinfachendes Beispiel- habe ich 3 Gruppen mit je 10 Buttons. Muss ich jetzt jeden Button einzelnt ansprechen. Bekommt jeder seine eigenen Css Anweisungen?

    Ich habe eine Button Gruppe. Die möchte ich über position:absolute positionieren.
    Klappt aber nicht. geht das grundsätzlich nicht?


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #wrapper {


    width:420px;
    height:650px;
    border: 1px solid blue;
    margin: 5px;
    position:relative;
    }


    p{
    position:absolute;
    color: red;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5em;
    left:10px;
    top:200px;
    }


    .btn-group .button {
    positon: absolute;
    top:300px;
    left:10px;
    width:50px;
    height:40px;
    background-color: #4CAF50;
    color: white;
    padding: 5px 5px;
    font-size: 15px;


    }


    .btn-group .button:hover {
    background-color: #3e8e41;
    }
    </style>
    </head>
    <body>


    <div id="wrapper">
    <p id="bringTitel">Arbeitsspeicher3</p>



    <div class="btn-group">
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
    </div>
    </div>
    </body>
    </html>