Beiträge von Sempervivum

PS: Man kann das Ganze stark vereinfachen, wenn man CSS und transform:scale() verwendet. Das hat zusätzlich den Vorteil, dass sich das Layout beim Vergrößern nicht verschiebt.

var imgs = document.querySelectorAll("img");
            for (var i = 0; i < imgs.length; i++) {
                var im = imgs[i];
                im.addEventListener("mouseover", function () {
                    this.style.transform = "scale(1.2)";
                });
                im.addEventListener("mouseout", function () {
                    this.style.transform = "scale(1.0)";
                });
            }
        });

Du brauchst nicht auf die Bilddaten selber zuzugreifen, sondern musst nur die entspr. Attribute manipulieren. Statt deines Ansatzes mit mousemove empfehle ich, mouseover und mouseout zu verwenden, dann kannst Du auf eine Neuigkeitsauswertung verzichten.

Dieses funktioniert bei mir im Tampermonkey:

        window.addEventListener("load", function () {
            var imgs = document.querySelectorAll("img");
            for (var i = 0; i < imgs.length; i++) {
                var im = imgs[i];
                var cstyle = getComputedStyle(im, null);
                var width = parseInt(cstyle.getPropertyValue("width"));
                var height = parseInt(cstyle.getPropertyValue("height"));
                im.setAttribute("data-owidth", width);
                im.setAttribute("data-oheight", height);
                im.addEventListener("mouseover", function () {
                    this.width = this.getAttribute("data-owidth") * 1.2;
                    this.height = this.getAttribute("data-oheight") * 1.2;
                });
                im.addEventListener("mouseout", function () {
                    this.width = this.getAttribute("data-owidth");
                    this.height = this.getAttribute("data-oheight");
                });
            }
        });

Zitat

da ich ein userscript bauen will

Was meinst Du damit? So ein Skript für Tampermonkey o. ä., das man auf eine fremde Seite anwenden kann?

Du musst berücksichtigen, dass, wenn ein Bild in Originalgröße eingebunden ist, dieses sich nur mit Qualitätsverlust vergrößern lässt.

Ein img-Element ist inhaltsleer, es hat keinen Inhalt in deinem Sinne, auf den Du mit innerHTML oder textContent zugreifen könntest.

Außerdem ist es verfehlt, in einem onmousemove-Handler ein alert anzubringen, weil dieser den ganzen Browser blockiert und das onmousemove-Element wiederholt triggert.

Zitat

Ganz am Schluss will ich versuchen mit den Daten aus dem Formular dann zu arbeiten.

Zitat

Wenn ich das richtig verstehe, muss ich die Variablen aus der Funktion herausholen

Aus der Funktion heraus holen geht nur über einen Rückgabewert oder globale Variablen. Ersteres geht nicht bei einem Eventhandler und letzteres würde ich nicht empfehlen.
Statt dessen empfehle ich, die weitere Verarbeitung ebenfalls in der Funktion ausgabe() zu machen:

function ausgabe (event)
    {
    event.preventDefault();
    var autoerzeuger = document.getElementById ('autohersteller').value;
    var farbevonauto = document.getElementById ('farbeauto').value;
    var maxgeschw = document.getElementById ('maxgeschwindigkeit').value;
    
    document.getElementById("anzeige").innerHTML = "Hersteller: " + autoerzeuger + "Farbe: " + farbevonauto + " maximale Geschwindigkeit: " + maxgeschw;
    // hier die weitere Verarbeitung
  }

Außerdem empfehle ich, auf document.write() zu verzichten. Das Verhalten ist u. U. schwer einzuschätzen. Besser die Daten mit innerHTML in einen Container eintragen.

Der Grund ist wahrscheinlich etwas unerwartet: Durch das Submit des Formulars wird das Formular abgeschickt, d. h. die unter "action" angegeben PHP-Seite wird aufgerufen und die Parameter werden übergeben. Ist "action" nicht definiert, wird einfach die aktuelle Seite aufgerufen bzw. neu geladen. Dabei geht alles, was Du mit Javascript definiert und in den Ausgabe-Container geschrieben hast, verloren.

Um den Fehler zu beheben, musst Du die Default-Aktion des Submit, d. h. das Laden der Seite, unterdrücken. Das geschieht mit event.preventDefault():

<script>
        function ausgabe (event)
        {
            event.preventDefault();
            var autoerzeuger = document.getElementById ('autohersteller').value;
            var farbevonauto = document.getElementById ('farbeauto').value;
            var maxgeschw = document.getElementById ('maxgeschwindigkeit').value;

            document.getElementById("anzeige").innerHTML = "Hersteller: " + autoerzeuger + "Farbe: " + farbevonauto + " maximale Geschwindigkeit: " + maxgeschw;
        }

    </script>

    <form name="Autodaten" action="" method="get" enctype="text/plain">
        Hersteller:             <input id="autohersteller" type="text" name="" value="" size="20" maxlength="50" onkeyup="ausgabe()" /><br>
        Farbe:             <input id="farbeauto" type="text" name="" value="" size="20" maxlength="50" onkeyup="ausgabe()" /><br>
        Max.Geschwindigkeit:      <input id="maxgeschwindigkeit" type="text" name="" value="" size="20" maxlength="50" onkeyup="ausgabe()" /><br>

        <input type="submit" name="" value="Sichern" onclick="ausgabe(event)" />
    </form>

    <div id="anzeige">
        Test1
    </div>

Zitat

Ein paar Wörter davon hau ich einfach direkt im Code rein.

Nicht nötig, wenn Du die Datei mit den Wörtern als UTF-8 speicherst, funktioniert es einwandfrei.

Kann beim Lesen keinen Fehler entdecken. Bei meinen Tests war $woerter anfangs leer, weil ich die Datei gesamt.txt anfangs nicht UTF8-kodiert gespeichert hatte. Dann schlägt das Kodieren nach JSON fehl, wenn Umlaute oder ß vorhanden sind und das Array ist leer.

Wenn Du es damit nicht beheben kannst, dann lade den Code hoch und poste die URL. Du kannst ja eine Kopie anlegen, damit das, was funktioniert, online bleibt.

Der Ansatz ist schon richtig, sofern $woerter ein Array ist, wird auch Wortliste eines sein. Dann kannst Du ein zufälliges Wort wie folgt auswählen:

        var woerter = <?php echo json_encode($woerter); ?>;
        console.log(woerter);
        var idx = Math.floor(Math.random() * woerter.length);
        var zufallswort = woerter[idx];
        console.log(zufallswort);

Ja, jetzt wo ich das sehe, verstehe ich, was Du vor hast. Da warst Du aber fleißig, ein Array mit 600 Wörtern! Oder ist das mit PHP generiert?

Mein Code funktioniert bei mir einwandfrei. Ich hatte ihn zunächst nur mit Ziffern getestet und mit Wörtern funktionierte er nicht. Dann habe ich ihn korrigiert und in meinem Posting geändert. Hast Du vielleicht vorher die fehlerhafte Version genommen?

Wenn Du bei jedem Druck auf Start ein neues Wort auswählen willst, wäre es natürlich besser, das ganze Array in JSON zu kodieren und von PHP an JS zu übergeben.

Wenn die Wörter untereinander, durch Zeilenumbruch getrennt, stehen, kann man sie viel einfacher mit der Funktion file() in ein Array einlesen.

Für den oberen Grenzwert bei Aufruf von rand() besser die Anzahl der Wörter durch count() ermitteln.

Wenn Du im PHP nur ein einziges Wort ausgibst, brauchst Du dieses nicht mit jcon_encode() zu kodieren.

Dieses funktioniert bei mir:

    <?php
    $woerter = file('gesamt.txt', FILE_IGNORE_NEW_LINES);
    $idx = rand(0, count($woerter) - 1);
    ?>
    <script>
        var zufallswort = "<?php echo $woerter[$idx]; ?>";
        console.log(zufallswort);
    </script>

Zitat

Jetzt muss ich nur meine Textdatei mit den Wörtern in einen Array bekommen

Würde ich automatisch mit einem PHP-Skript machen. Poste die Struktur der Textdatei, dann kann man dir die wenigen Zeile Code geben.

Zitat

Hab versucht mit json_encode einen php Array zu übergeben.

Das ist sicher der richtige Ansatz. Hast Du es so versucht?:

var woerter = <?php echo json_encode($woerter); ?>;

OK, da habe ich dich wohl falsch verstanden. Dies müsste es sein:

CHE \d{3}\.\d{3}\.\d{3}

mit Leerzeichen zwischen CHE und den Ziffern. Wenn kein Leerzeichen, brauchst Du es nur zu löschen.

Das Problem liegt offenbar hier:

<img src="FA/Hello.png" onload="play('bild1');" id="bild1" />

Dieses onload feuert nicht nur, wenn die Seite zum ersten Mal geladen wird, sondern auch jedesmal, wenn Du das src-Attribute änderst, um ein neues Bild anzuzeigen, denn dabei wird dieses Bild jeweils geladen.

Durch die vielen Mini-Funktionen ist der Code schwer zu lesen, ich empfehle, es zu straffen.

Außerdem empfehle ich, die Bildadressen in einem Objekt abzulegen:

var bilder = {};
bilder.a = "FA/FA_A.png";
bilder.b = "FA/FA_B.png";
bilder.c = "FA/FA_C.png";
bilder.d = "FA/FA_D.png";
// usw.

Dann kann der ganze Switch entfallen und es reduziert sich auf:

document.getElementById(a).src = bilder[a];

Trifft zu, verlässliche Quellen weisen darauf auch hin, z. B. hier:

https://wiki.selfhtml.org/wiki/HTML/Form…_von_Formularen

Ja, der Browser prüft, ob die Eingabe dem Pattern bzw. der Regex entspricht und setzt entsprechend die Eigenschaft "validity.valid". Diese kannst Du in Javascript auswerten.

So etwas wird von der Formularvalidierung unterstützt und benötigt zunächst kein Javascript. Informiere dich darüber. Dabei kannst Du ein Pattern in Form einer Regex angeben. In deinem Fall wird die relativ einfach sein:

/\(CHE-123\.456\.789\) CHE \d{3}\.\d{3}\.\d{3}/

Je nachdem, wie und wann Du die Fehlermeldung ausgeben willst, kann es sein, dass Du zusätzlich Javasript benötigst.

Zitat

das mach ich wohl über einen Provider (??). Aber was ist das?? Kostet das was?? Was ist, wenn ich meinen Internetanbieter wechsel, bleibt dann der Provider??

Ein Provider ist jemand, der Webspace anbietet, auf den Du deine Homepage hoch laden und online stellen kannst. Er ist unabhängig von Anbieter deines Internetzugangs und Du brauchst ihn nicht zu wechseln, wenn Du den Internetanbieter wechselst.

Zitat

Welchen Webspace würdest du empfehlen?

Kostenlos würde ich ebenso wie Lauras bplaced.net empfehlen. Kostenpflichtige gibt es sehr viele. Ich selber bin bei all-inkl und sehr zufrieden, Schneller, kompetenter und kostenloser Support. Allerdings ist das kleinste Paket mit 5 € relativ teuer und vielleicht etwas überdimensioniert für den Anfang. Strato und Alfahosting sind allerdings auch nicht viel günstiger, wenn man nicht auf PHP verzichten will.

Du brauchst die Elemente nur hintereinander zu notieren:

<img src="dein-bild.jpg"><input type="text" name="dein-input"><input type="submit">

Leider habe ich keine fundierten Kenntnisse in der Implementierung von Browsern, aber weil dir sonst niemand antwortet, versuche ich es mal: Offensichtlich liegen hier Unterschiede in der Implementierung der Browser vor. Ich würde dem nicht so große Bedeutung beimessen, weil Alerts eher geeignet sind, quick and dirty, mal eben etwas anzuzeigen oder abzufragen. Für eine wirklich brauchbare Benutzeroberfläche wird man eher Ein- und Ausgabefelder, evtl. auch Modale benutzen.

Außerdem empfehle ich, auf document.write zu verzichten, weil das Verhalten u. U. schwer zu durchschauen ist.