nicht angemeldet
Bild und Text nach onclick anzeigen
JürgenBGuten Tag,
bin neuling im javascript programmieren. Ich habe 1-2 Fragen zu einem Script:
Ich möchte ein Text und ein Bild ausgeben nachdem man auf einen Button klickt.
Den Text bekomm ich hin mit document.write , aber wie bekomm ich das Bild mit dazu?
Und ist es möglich das nach dem Button-Klick nicht eine neue Seite geöffnet wird, sondern der Text und das Bild auf der selben Seite über dem Button angezeigt wird?
Vielen Dank für eure Hilfe :-)
-
Dir fehlen offenbar die Grundlagen zur http://de.selfhtml.org/javascript/objekte/document.htm@title=DOM-API.
In Javascript schreibst du nicht, wie oft in PHP üblich, einfache Strings in die Ausgabe. Sondern du erstellst DOM-Elemente und hängst diese in den DOM-Baum ein.
Und ist es möglich das nach dem Button-Klick nicht eine neue Seite geöffnet wird, sondern der Text und das Bild auf der selben Seite über dem Button angezeigt wird?
Die Seite wird nicht neugeladen, das ist ein Nebeneffekt von document.write.
-
Dir fehlen offenbar die Grundlagen zur http://de.selfhtml.org/javascript/objekte/document.htm@title=DOM-API.
Ja ich weiß, habe aber schon seit 1 stunde in den verschiedenen elementen gesucht aber nichts passendes mit bildern gefunden.
In Javascript schreibst du nicht, wie oft in PHP üblich, einfache Strings in die Ausgabe. Sondern du erstellst DOM-Elemente und hängst diese in den DOM-Baum ein.
Und ist es möglich das nach dem Button-Klick nicht eine neue Seite geöffnet wird, sondern der Text und das Bild auf der selben Seite über dem Button angezeigt wird?
Die Seite wird nicht neugeladen, das ist ein Nebeneffekt von document.write.
also ist dies nicht möglich. ist es möglich dann auf der neuen Seite buttons wieder anzuzeigen?
-
Hallo beginngerbb,
also ist dies nicht möglich.
natürlich ist es möglich. Stichworte: document.createElement, document.appendChild, node, ...
siehe z.B. http://de.selfhtml.org/javascript/objekte/document.htm, http://de.selfhtml.org/javascript/objekte/node.htm
Von document.write lässt du am besten die Finger.
Gruß, Jürgen
-
Hallo beginngerbb,
also ist dies nicht möglich.
natürlich ist es möglich. Stichworte: document.createElement, document.appendChild, node, ...
siehe z.B. http://de.selfhtml.org/javascript/objekte/document.htm, http://de.selfhtml.org/javascript/objekte/node.htm
Von document.write lässt du am besten die Finger.
Gruß, Jürgen
Danke für die schnelle Antwort!
Ich habe das mal alles durchgelesen, brauche aber doch ein wenig Hilfestellung.<html>
<head>
<title>Beispiel</title>
<script type = "text/javascript">function eins()
{
document.write("Funktion 1");
}function zwei()
{
document.write("Funktion 2");
}
</script>
</head>
<body>
<p> Bitte Funktion Wählen:</p>
<input type= "button" value="Hauptstrasse gesperrt" onClick="eins();">
<input type= "button" value="Hauptstrasse frei" onClick="zwei();">
</body>
</html>das ist mein Programm zur Zeit als Beispiel.
da der document.write nicht das richtige ist und eine "neue Seite" anzeigt ist meine Frage noch: Kann ich da noch ein Button mit beiden Funktionen setzen unter "document.write" so das im Prinzip der Neue Text da steht aber unten drunter trotzdem noch beide Buttons sind oder sollte ich mich komplett nach einer anderen Lösung umschauen?-
Hallo beginnerbb,
um etwas auszugeben, benötigst du (z.B.) im HTML eine entsprechendes Element, z. B. ein "p". Um es ansprechen zu können, muss es (z.B.) eine ID haben:
<p id="out"><p>Das "Befüllen" kann dann z.B. so aussehen:
var out = document.getElementById("out"); // Zugriff auf das Ausgabeelement, darf erst erfolgen, wenn das Element existiert out.innerHTML = "Hallo Welt!"; // Zuweisung über innerHTML out.innerHTML += " Ich bin's."; // Erweiterung mit "+=" out.appendChild(document.createTextNode("Halli hallo!")) ; // Befüllen mit DOM-Methoden.Probiers mal aus.
Gruß, Jürgen
PS Meine Beispiele sind nicht getestet, Schreibfehler also möglich.
-
-
Hallo Jürgen,
natürlich ist es möglich. Stichworte: document.createElement, document.appendChild, node, ...
Möglich wäre es auch die display-Eigenschaft per ...style.display zu ändern und so ein bereits vorhandenes Element einfach nur noch einzublenden - dann spart man sich den ganzen Aufwand alles per Hand zusammenbauen zu müssen.
Gruß,
Tobias
-
-
-