Eine JavaScript-Variable im HTML-Body anzeigen
-
Verwendung von
innerHTMLzur Anzeige von JavaScript-Variablen im HTML-Body -
Verwendung der Eigenschaft
document.write()zur Anzeige von JavaScript-Variablen im HTML-Body -
Verwenden Sie die Eigenschaft
window.alert, um die JavaScript-Variable im HTML-Text anzuzeigen
Oft ist es einfacher, explizit ein script-Tag zu definieren und den Codeblock für die notwendige Ausgabe in einem HTML-Body einzufügen. Wir verwenden auch script-Tags im head-Tag, um den Code-Fence von JavaScript vor dem body-Tag zu laden.
Jede Konvention hat ihre Bemerkungen; Wenn wir überprüfen müssen, ob der Code fehlerfrei ist, können wir JavaScript-Funktionen im Abschnitt head hinzufügen, um die Aufgabe auszuführen. Wir können JavaScript auch im body-Element für Klickereignisse und andere dynamische Funktionen verwenden.
Hier zeigen wir, wie eine JavaScript-Variable im HTML-Body angezeigt wird, und fügen insbesondere unsere Codeblöcke in das body-Element ein. Es gibt jedoch einen Unterschied zwischen dem Übergeben von Werten im HTML-Text und dem vorübergehenden Anzeigen eines Werts, der durch JavaScript-Codekonventionen ausgelöst wird.
Verwendung von innerHTML zur Anzeige von JavaScript-Variablen im HTML-Body
Die Verwendung von innerHTML durch Abrufen einer bestimmten id oder class und Übergeben des Werts einer Variablen ist eine der gebräuchlichsten Methoden, um eine JavaScript-Variable im HTML-Body anzuzeigen.
Wir initialisieren ein span-Tag in unserem HTML-Body mit einer id = "input". Dann hat das script-Tag eine Variable, die über die innerHTML-Eigenschaft an diese id = "input" gesendet wird. Diese DOM manipulation ist praktisch, wenn JavaScript-Variablen im HTML-Body platziert werden.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<p> Hello! I'm <span id="input"></span>.</p>
<script>
document.getElementById('input').innerHTML = "Robert" ;
</script>
</body>
</html>
Ausgabe:
Verwendung der Eigenschaft document.write() zur Anzeige von JavaScript-Variablen im HTML-Body
Hier wird das System zum Initialisieren der Eigenschaft document.write(parameter) hauptsächlich zum Testen von Variablen verwendet. In diesem Fall ist der parameter die in JavaScript definierte Variable oder das Objekt.
Wir deklarieren die Variable in einem script-Tag vor dem Segment, um sie anzuzeigen. Später werden wir ein p-Tag haben, und darin übernimmt ein weiteres script-Tag die Initiierung des oberen Skripts.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<script>
var input = "Gwen";
function doc(){
document.write(input);}
</script>
</head>
<body>
<p> Hello! I'm <script>doc(input)</script>.</p>
</body>
</html>
Ausgabe:
Verwenden Sie die Eigenschaft window.alert, um die JavaScript-Variable im HTML-Text anzuzeigen
Dies ist ein sehr einfacher Prozess, um Ihre Variable per DOM manipulation zu testen.
Wir werden ein JavaScript-Objekt oder eine JavaScript-Variable definieren und hier einen zufälligen Wert speichern. Innerhalb des script-Tags deklarieren wir window.alert(variable), und diese Eigenschaft wird eine Nachricht auslösen, wenn sie das Fensterobjekt auslöst.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<script>
var input = "Hello! I'm Tom.";
window.alert(input);
</script>
</body>
</html>
Ausgabe:
