Verwendung von JavaScript-Variablen in HTML

Anika Tabassum Era 12 Oktober 2023
  1. Verwendung benutzerdefinierter JavaScript-Variablen in HTML
  2. JavaScript-Variable aus Eingabeaufforderung geladen
  3. Erstellen Sie ein Tag-Element aus Skript- und Variablenzugriff auf HTML
Verwendung von JavaScript-Variablen in HTML

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:

benutzerdefinierte js-Variable in html

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:

prompte Eingabe

Aufforderung zur Eingabe in HTML

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:

Tag-Element erstellen, um HTML zu übergeben

Tag-Element erstellen, um HTML2 zu übergeben

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Verwandter Artikel - JavaScript Variable