在 HTML 中使用 JavaScript 變數

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. HTML 中的 JavaScript 使用者定義變數用法
  2. 從提示載入的 JavaScript 變數
  3. 從指令碼和對 HTML 的變數訪問建立標記元素
在 HTML 中使用 JavaScript 變數

JavaScript 變數通常是使用者在編碼​​時定義的,或者你可以使用提示來獲取資料並將其儲存在變數中以供進一步使用。

在這裡,我們將展示如何作用於使用者定義的變數並在 HTML 中使用它,後面的演示將解釋提示如何在這方面幫助我們。

HTML 中的 JavaScript 使用者定義變數用法

我們在程式碼示例中使用 jsbin,在這裡你將看到 p 元素由 id output 標識。最初,變數 myPet 設定為 Tobey,然後在網頁中執行後面的簡單行。getElementById 找到首選 id,然後變數以 inner.HTML 格式傳遞,因此 JavaScript 變數可以在 HTML 中使用。

程式碼片段:

<!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!";

輸出:

使用者在 html 中定義的 js 變數

從提示載入的 JavaScript 變數

在這一部分中,我們將看到我們如何在提示視窗中輕鬆輸入值,並直接顯示在我們載入的網頁中。

程式碼片段:

<!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!";

輸出:

提示輸入

提示輸入到 html

從指令碼和對 HTML 的變數訪問建立標記元素

在這裡,我們將在指令碼中建立一個 p 標籤,該標籤可在 HTML body 中訪問。p.innerHTML 是將變數資料傳遞給 body 標籤的關鍵。

程式碼片段:

<!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);

輸出:

建立標籤元素以傳入 html

建立標籤元素以傳入 html2

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 GitHub Facebook

相關文章 - JavaScript Variable