Wie packt man eine prompt Variable in eine Überschrift?
4 Antworten
Hi Plonkadonka,
um den Text aus der Prompt-Box mit einzufügen, kannst du einfach die Variable mit dem Additionsoperator an .innerText der Überschrift hinzufügen.
Beispiel:
[...]
<body>
<h1 id="greet">Nice to meet you, </h1>
<script>
// Benutzername abfragen
while(!(window.username = prompt('Please type in your username', 'username')));
// Überschrift-Element auswählen ...
document.querySelector('h1#greet')
// Benutzername anhängen
.innerText += username;
</script>
</body>
Zum testen das hier in die Adressleiste kopieren:
data:text/html,<body><h1 id="greet">Nice to meet you, </h1><script>while(!(window.username = prompt('Please type in your username', 'username')));document.querySelector('h1#greet').innerText += username;</script></body>
Liebe Grüße
Win7User
Sehr lieb, dass du ein kleines, verbessertes Programm geschrieben hast:)
Wenn der Server PHP zur Verfügung stellt, würde ich das mit PHP machen. (Es sei denn, der User soll seinen Namen dynamisch ein einem Textfeld ändern können und die Webanwendung soll sofort darauf reagieren, dann ist ECMAScript (vulgo JavaScript) angemessen.)
<h1>Nice to meet you, <?php echo $username; ?></h1>
(Übrigens würde ich nach Möglichkeit vermeiden, Sprachen zu mischen -- der Seitentitel "Willkommen" ist deutsch, der Inhalt "Nice to meet you" ist englisch.)
Okey, also in Bezug auf deinen JavaScript code kann ich hier kein Element mit der ID varname sehen.
Änder mal folgendes in der:
html-Datei
<h1 id="varname">Nice to meet you, ...</h1>
javascript-Datei:
document.getElementById('varname').innerHTML += name;
// Dann fügt es den namen einfach hinten dran
// Alternativ kannst du natürlich trotzdem das ganze neu setzen, aber dann ohne <h1> , denn dein element ist ja schon ein h1
Und dann sollte es funktionieren
Ich würde vermutlich ein eigenes Element für den Variableninhalt nehmen:
<h1>Nice to meet you, <span id="username01" /></h1>
und
document.getElementById('username01').text = username;
(bin im Moment nicht sicher, ob text die richtige Eigenschaft ist, müsste recherchiert oder/und ausprobiert werden)
oder -- damit man mehrere Inhalte an einer Stelle anpassen kann:
<h1>Nice to meet you, <span name="username" /></h1>
und
for each (usernameelement in document.GetElementsByName('username')) {
usernameelement.text = username;
}
Nein document.write(); ist nur dafür gedacht text (kann auch html sein) in das ganze document zu schreiben.
Wenn du ein bestimmtest Element ansprechen willst, dann nimmst du, wie du schon verwendest hast, das getElementBy... und arbeitest mit innerHTML bzw. value, nodeValue, etc.
- Verwende nicht document.write.
- Ja, aber nicht so, wie du es versuchst. Das Dokument stellt eine HTML-Seite dar, daher wäre es unlogisch, wenn es ein Attribut besäße, welches auf andere Seiten zugreifen kann. Vergleiche bspw. die URL:
if (window.location.href === "someUrl") {
// do something ...
}
Oder orientiere dich an bestimmen anderen Eigenheiten, die nur diese Seite zu bieten hat, auf der du den Text ausgeben lassen möchtest (Attributwerte o.ä.). Nutze dafür die DOM API.
kann ich mich bei document.write (in js) explizit auf eine bestimmte html seite ansprechen
Wie schon gesagt, können Scripte nur die aktuelle Seite bearbeiten. Informationen zwischen Seiten überträgt man mit Cookies oder URL-Parametern.
Eine Möglichkeit: Unter </html> schreibst du noch ein script mit dem Inhalt:
document.getElementsByTagName("h1")[0].innerHTML += promptVariable;
(ungetestet)
Mit </html> endet das Dokument! Dahinter darf man keinen zusätzlichen Inhalt/Skript schreiben.
Bei mir werden alle drei alerts angezeigt,
sowohl vor /body, als auch nach /body und nach /html.
es muss ja entweder im <head> oder im <body> stehen :'D
Ist das aber nicht selbstverständlich?
HTML scheint toleranter zu sein als die Norm, auf die du dich beziehst (beziehst du dich auf eine?).
Ich beziehe mich auf die HTML-Standards. Die werden natürlich mit dem Validator von W3C überprüft.
Das zeigt das hier an:
Error: Stray start tag script
Darauf folgt ein
Fatal Error: Cannot recover after last error. Any further errors will be ignored.
Einen Skript-Tag nach dem schließenden HTML-Tag erzeugt einen Fatalen Error -- das sollte man auf jeden Fall vermeiden!
Ich weiß nicht, was du für einen Validator benutzt hast, aber wenn er das nicht als Fehler anzeigt, scheint er nicht seht gut zu sein. Für HTML sollte man meiner Ansicht nach immer den von W3C benutzen (W3C definiert die Webstandards)!
Ich habe überhaupt keinen Validator benutzt, sondern es einfach ausprobiert und es hat funktioniert. ^^'
Hab es anders geschafft - kann ich mich bei document.write (in js) explizit auf eine bestimmte html seite ansprechen, zum Bsp document.htmlname.write() ? :)