HOWTO · JavaScript
Verwendung von JavaScript-Variablen in HTML
JavaScript-Variablen können angezeigt werden oder in HTML funktionieren, indem eine ID oder Klasse eines HTML-Elements verwendet wird, oder es kann ein Element im Skriptcode erstellt werden, um eine Vorschau der Variablen anzuzeigen.
JavaScript-Variablen werden beim Codieren oft benutzerdefiniert, oder Sie können die Eingabeaufforderung verwenden, um Daten abzurufen und sie zur weiteren Verwendung in einer Variablen zu speichern.
Hier zeigen wir, wie man auf eine benutzerdefinierte Variable reagiert und sie in HTML verwendet, und die spätere Demonstration wird erklären, wie uns die Eingabeaufforderung in dieser Hinsicht helfen kann.
Verwendung benutzerdefinierter JavaScript-Variablen in HTML
Wir verwenden jsbin für die Codebeispiele, und hier sehen Sie, dass das p-Element durch die id-Ausgabe identifiziert wird. Zunächst wurde die Variable myPet auf Tobey gesetzt und die spätere einfache Zeile in der Webseite ausgeführt. getElementById findet die bevorzugte id und später werden die Variablen im inner.HTML-Format übergeben, damit die JavaScript-Variablen im HTML verwendet werden können.
Code-Auszug:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
background: pink;
}
</style>
</head>
<body>
<p id="output"></p>
</body>
</html>
var myPet = 'Tobey';
var nameLength = myPet.length;
document.getElementById('output').innerHTML =
myPet + ' is a ' + nameLength + ' letter name!';
Ausgabe:
JavaScript-Variable aus Eingabeaufforderung geladen
In diesem Abschnitt werden wir sehen, wie wir einfach einen Wert in das Eingabeaufforderungsfenster eingeben und dieser direkt auf unserer geladenen Webseite angezeigt wird.
Code-Auszug:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
background: pink;
}
</style>
</head>
<body>
<p id="output"></p>
</body>
</html>
var myPet = prompt();
var nameLength = myPet.length;
document.getElementById('output').innerHTML =
myPet + ' is a ' + nameLength + ' letter name!';
Ausgabe:
Erstellen Sie ein Tag-Element aus Skript- und Variablenzugriff auf HTML
Hier erstellen wir im Skript ein p-Tag, auf das im HTML body zugegriffen werden kann. Das p.innerHTML ist der Schlüssel zur Übergabe der variablen Daten an das body-Tag.
Code-Auszug:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
background: gray;
color: white;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
var myPet = prompt('Enter Name');
var nameLength = myPet.length;
p = document.createElement('p');
p.innerHTML = myPet + ' is a ' + nameLength + ' letter name!';
document.body.appendChild(p);
Ausgabe:
