wie ist es möglich mithilfe von javascript, bilder erscheinen zu lassen?

guten morgen,
ich möchte mit javascript bilder erscheinen lassen.
leider bin ich ein totaler anfänger bezüglich javascript und habe erst seit kurzer zeit die lust zum programmieren entwickelt. gerade bin ich dabei, javascript von nothing to something zu lernen, jedoch weiß ich ab diesem punkt nicht weiter.

ich möchte eine funktion bauen, die beispielsweise container aus html abhakt, sobald diese fertig bearbeitet worden sind. stichwort: learningtool.

mithilfe der funktion soll es vereinfacht werden, wie bei einer to-do-list thema nach thema zu bearbeiten und das lesezeichen quasi immer parat zu haben.

ich freue mich auf eure/deine unterstützung.

1 Antwort

BeamerBen

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren

13.10.2021, 12:44

Ich verstehe nicht so ganz wo dein Problem bei deinem Vorhaben ist, aber Prinzipiell könnte man einfach <img> Elemente an der richtigen Stelle ins DOM einfügen. Sollte in jedem Anfänger Tutorial grundsätzlich behandelt sein.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

Ansonsten wenn man dynamisch Grafiken erstellen muss habe ich in der Vergangenheit über JavaScript SVGs erstellt / manipuliert oder man nutzt die Canvas API.

Wenn du meinst du willst irgendwas abhaken geht das visuell eventuell auch über CSS und über JavaScript eine Klasse toggeln, die Frage ist da nur dann eventuell wie kompliziert die Sache ist die du genau machen möchtest.

Woher ich das weiß:Berufserfahrung – Software Entwickler / Devops

Hallo,

ich bin grade etwas verwirrt. Wie kann ich mithilfe einer Variable feststellen, wie oft eine Funktion aufgerufen wurde. Weil bei jedem Funktionsaufruf wird meine Variable wieder auf 0 gesetzt. Irgendwelche Ideen?

...zur Frage

HTML/CSS/JAVASCRIPT Taschenrechner Fehler beheben?

ich programmiere grade einen Taschenrechner mithilfe von Javascript, habe auch alles soweit richtig hinbekommen. nur wenn ich einen buchstaben eingebe zeigt mit der browser(in diesem fall t): Uncaught ReferenceError: t is not defined

welche funktion muss ich noch hinzufügen das einfach gar nichts bei einem buchstaben passiert aber auch keine fehlermeldung kommt?

danke

https://hastebin.com/nutoquduca.html

...zur Frage

Wieso kann ich mein Bild in GIMP nicht mehr verschieben?

Hi, ich muss in Geschichte ein Deckblatt machen. Also Bilder auf einem A4 Blatt drauf machen. Ich habe mich entschieden mit dem Programm GIMP mein Deckblatt zu gestalten. Ich habe ein paar Bilder drauf gemacht und wollte sie dann verschieben aber da Stand nur "there is nothing to move" obwohl es vor ein paar Sekunden noch ging. Kann mir jemand bitte erklären wie ich meine Bilder jetzt verschiebe kann ohne sie ein zweites Mal hinzufügen zu müssen?

Vielen Dank für alle hilfreichen Antworten

...zur Frage

Mit Javascript zu einem Teil im HTML Dokument springen?

Hallo !

Ich bin gerade dabei eines meiner ersten Projekte mit JavaScript/CSS/HTML umzusetzen.

Ich bin gerade dabei eine Suchfunktion einzubauen.

Ich habe eine Layout von Material Design Lite verwendet. Ich habe es so umgesetzt, dass das ganze im einem HTML Formular steht und beim absenden (drücken der ENTER Taste) eine JavaScript Funktion ausgeführt wird. Bei dieser hole ich mir mithilfe von document.getElementById().value den Wert der eingegeben wurde und sage, dass dieser Wert auf eine Variable übertragen wird. Ich frage per If und else ab was eingeben wurde (Bsp. 1) und will dann das zum einem bestimmten Teil im HTML Text gesprungen wird.

Mein Problem :

Ich muss es irgendwie umsetzen, dass mit JavaScript Code zu einem bestimmten Teil (im HTML Text ) gesprungen wird OHNE das man auf einen Link klicken muss.

Weiß jemand von euch hier, wie das möglich ist ?

(Danke für deine Zeit, beim Lesen und Danke für jede Antwort)

Hier der Code meiner JavaScript Funktion

Hier der Code des HTML Formulars

...zur Frage

PHP Sichere Api erstellen?

Hi, kann mir jemand ein paar Tutorials oder Artikel empfehlen, oder kennt eine Anleitung wie man eine sichere API für PHP macht?

Was ich machen möchte:

Ich möchte mir eine kleine Oberfläche für unsere Online Shops erzeugen in der jeden Tag Lagerbestände und Anzahl der Verkauften Artikel abgespeichert werden(das ist soweit auch umgesetzt). Aktuell gebe ich die Werte aber noch per PHP Skript aus. Das ganze möchte ich jetzt aber dynamischer gestalten und mithilfe von Javascript ausgeben lassen, admit ich per PHP nur noch das Grundgerüst der Seite aufbaue und per Javascript dann die Tabellen ausgebe und Filter setzen sowie suchen kann.

An der Uni habe ich sowas vor ein paar Jahren schonmal mit XHR gemacht, dabei haben wir aber das Thema sicherheit nicht behandelt, welche Wege gibt es denn soetwas "sicher" umzusetzen, damit nicht einfach ein Bot der auf die Seite kommt dort per CRUD irgendwelche Werte eingeben könnte oder abfragen könnte?

Macht es da sinn ein Token zu erzeugen und das dann in den Javascript Dateien zu speichern oder die Zugangsdaten des Benutzers bei jedem Aufruf mitzusenden? Ich möchte das ganze vielleicht auch so gestalten das man daraus vielelicht auch mal eine App erstellen könnte, falls der bedarf in Zukunft aufkommt.

...zur Frage

Sollte man Menschen fürchten, die nichts, oder die etwas zu verlieren haben?

Fürchte den Mann, der nichts zu verlieren hat.

Fear the man who has nothing to lose.

Fürchte den Mann, der etwas zu verlieren hat, denn er wird alles tun, um es zu behalten.

Fear the man who has something to lose, because he will do everything to keep it.

__________

Welches dieser Zitate ist eurer Meinung nach am wahrsten und warum?

...zur Frage

Javascript Seitenübergreifend?

Hallo,

ich möchte in einen Html Code einen Javascript Code für Lesezeichen einfügen. Also ich habe eine Seite mit vielen Texten (Seite x), zu jedem Text gibt es einen Button, der das jeweilige Lesezeichen hinzufügen soll. Wenn dieser Knopf gedrückt wird, dann soll ein derzeit unsichtbarer Container (display: none;) auf display:flex; bzw. Sichtbar gestellt werden (in Seite y).

Der Code der diese Funktion ausführen soll wäre derzeit:

function textfield1() {

var x = document.getElementById("th1");

if (x.style.display === "none") {

x.style.display = "block";

} else {

x.style.display = "none";

}

Dieser Code wird natürlich nur auf Seite x ausgeführt
kann mir jemand helfen, dass dieser Container dann auf Seite y gezeigt wird?

...zur Frage

Sprüche, wenn man nichts zu verlieren hat..

Bin auf der Suche nach ein paar guten Sprüchen, passend zu dem Thema, nichts mehr zu verlieren haben. Können auch Englisch sein !!

zB; when you got nothing, you got nothing to lose (Titanic)

...zur Frage

Javascript: Wie erstelle ich eine Schleife von Zufallszahlen?

Hi, ich bin noch ein ziemlicher Anfänger beim Javascript-Programmieren. Aber ich habe hier einen Code, mit dem Bilder (ausgehend von einem Ordner) zufällig in einer Schleife dauernd abgespielt werden. Dies klappt jetzt schon ganz gut:

     <script type="text/javascript">
     function bildwechsel_starten()
     {
             bildwechselthread = setInterval("bildwechsel()", 2000);
     }
     function bildwechsel()
     {
             zufall = Math.random();
             zufall = zufall * 5;
             zufall = Math.round(zufall);
             document.getElementById("wechselndesbild").src = "TestOrdner/" + zufall + ".png";
     }

     </script>

Nun wäre es mein Wunsch, wenn man (am besten) unter den Bildern jedem Bild auch eigenen "Text" zuordnen könnte, der dann beim Erscheinen des Bildes auch erscheint. Und dieser "Text" sollte eine Zufallszahl sein & bei jedem Bild erscheint dann eine Zufallszahl in einem bestimmten Intervall, das sich bei jedem Bild unterscheidet. Zum Beispiel: Bild 1 ... Zufallszahl zwischen 5 und 10 Bild 2 ... Zufallszahl zwischen 14 und 30 Bild 3 ... Zufallszahl zwischen 2 und 4 ... usw ...

Kennt sich da jemand aus? Wie fange ich da am besten an? Ich habe hier eine Animation, um zu verdeutlichen, was ich meine: http://fs5.directupload.net/images/160718/jzdwwo2f.gif Das, was in der Klammer ist, sollte dann nicht stehen :D

Vielen Dank für eure Hilfe! :) :)

...zur Frage

Wieso schlechte Bildqualität bei Google Chrome?

Hallo,

Seit einer Weile werden Bilder , z.B. von Facebook in Chrome fehlerhaft angezeigt. Sie haben alle lila-blaue Flecken und Linien. In anderen Browsern hingegen (z.B. Edge) erscheinen die Bilder hingegen ganz normal.

Vielen Dank für eure Mithilfe!

...zur Frage

Bild wechsel mit Javascript?

Hey,

ich hab da eine Frage zum Thema Javascript. Undzwar möchte ich das sich mit jedem Reload ein Bild ändert (am besten random aus einer "Bildliste" ausgesucht).

Das hier ist der Code den ich derzeit versucht habe... allerdings kommt immer wieder der Fehler das er die Bilder nicht finden konnte...

var imagenumber = 3 ;

var randomnumber = Math.random() ;

var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;

images = new Array

images[1] = "bild1.png"

images[2] = "bild2.png"

images[3] = "bild3.png"

var image = images[rand1]

document.write('<IMG SRC="' + image + '">')

Wäre nett wenn mir jemand mit dem Problem helfen könnte.

...zur Frage

Wie kann ich eine HTML und JavaScript Login-Funktion mit nur einer Passwortmöglichkeit machen?

Ich will eine Login-Funktion für eine eigene Internetseite machen, wobei nur mein eigenes Passwort funktionieren soll. Es kommt aber immer die Meldung, dass das Passwort falsch sei.

Das ist mein Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Seitenname | Login</title>
    <meta charset ="utf-8">
  </head>
  <body>
    <div id="wrapper">
      <header><img src="bilder/Logo.jpg" alt="Logo"></header>
      <sectionAnmeldung>
        <div class="Anmelden">
          <h1>Anmelden</h1>
          <a>Passwort:</a>
          <input type="password" name="myPw" placeholder="Password" />
          <script>
            function pwRichtig() {
              var x = document.getElementsByName("myPw").value;
              var pw = "password123";

              if (x == pw) {
                document.open("hauptseite.html");
              }
              else {
                alert("Falsches Passwort!");
              }
            }
          </script>
          <input type="submit" name="" value="Einloggen" onclick="pwRichtig()" required />
        </div>
      </sectionAnmeldung>
    </div>
  </body>
</html>

...zur Frage

In HTML/Javascript Taschenrechner-Element Löschen Taste einbauen?

Moin zusammen,

Ich muss für meine Ausbildung mithilfe von HTML und Javascript einen Taschenrechner samt Funktionen bauen. Ich bin soweit auch mit allem fertig nur weiß ich nicht wie ich einer Taste die Funktion onclick zuweisen kann, dass ein Element im Result Area gelöscht wird. Ich kann lediglich alle angehängten Elemente im result area löschen. Gibt es hierfür eine vordefinierte Funktion? Hoffe es ist einigermaßen verständlich formuliert. Z.B. steht im Ergebnisfeld: "4+48" und nun möchte man nur die "8" weglöschen und nicht alles. Vielen dank!

...zur Frage

Bilder bei jquery/JavaScript nach bestimmter zeit austauschen?

Erstmal entschuldigung für die komische Überschrift, ich schmeiße manchmal die beiden gerne durcheinander.

Ich hab auf meiner Seite einen Timer (fürs Beispiel 30s), der mit einem Button gestartet werden. Am Anfang soll Bild1 stehen. Nachdem der Timer bei der Hälfte der Zeit angekommen ist (hier 15s) soll Bild2 dort erscheinen wo Bild1 vorher war. Ist der Timer bei 0 angekommen, wird man auf eine andere Seite weitergeleitet.

Wie mache ich das am besten?

Hier mein bisheriger Code

$(document).ready(function (e) {

var $timer = $("#timer");

var stop = false;

var timerLoop;

$( "#button_start" ).click(function() {

timerLoop = setInterval(function(){ update() }, 1000);

});

function update() {

if(!stop){

var myTime = $timer.html();

var ss = myTime.split(":");

var dt = new Date();

dt.setHours(0);

dt.setMinutes(ss[0]);

dt.setSeconds(ss[1]);

var dt2 = new Date(dt.valueOf() - 1000);

var temp = dt2.toTimeString().split(" ");

var ts = temp[0].split(":");

if(ss[0] === "00" && ss[1] === "01"){

stop = true;

clearInterval(timerLoop);

$("body").load( "./erfolgreich.html" );

}

$timer.html(ts[1]+":"+ts[2]);

//setTimeout(update, 1000);

}

});

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen