在 HTML 正文中顯示 JavaScript 變數

Anika Tabassum Era 2023年1月30日 2022年5月1日
  1. 使用 innerHTML 在 HTML 正文中顯示 JavaScript 變數
  2. 使用 document.write() 屬性在 HTML 正文中顯示 JavaScript 變數
  3. 使用 window.alert 屬性在 HTML 正文中顯示 JavaScript 變數
在 HTML 正文中顯示 JavaScript 變數

顯式定義 script 標籤並在 HTML 正文中新增必要的輸出程式碼塊通常更容易。我們還在 head 標籤中使用 script 標籤來載入 body 標籤之前的 JavaScript 程式碼。

每個慣例都有它的備註;如果我們需要檢查程式碼是否沒有錯誤,我們可以在 head 部分新增 JavaScript 函式來執行任務。我們還可以在 body 元素中使用 JavaScript 來實現點選事件和其他動態功能。

在這裡,我們將演示如何在 HTML 正文中顯示 JavaScript 變數,具體來說,我們將在 body 元素中新增我們的程式碼塊。但是在 HTML 正文中傳遞值和臨時顯示由 JavaScript 程式碼約定觸發的值是有區別的。

使用 innerHTML 在 HTML 正文中顯示 JavaScript 變數

通過獲取特定的 idclass 並傳遞變數的值來使用 innerHTML 是在 HTML 正文中顯示 JavaScript 變數的最常見方法之一。

我們將在我們的 HTML 正文中使用 id = "input" 初始化一個 span 標籤。然後 script 標籤將通過 innerHTML 屬性將一個變數傳送到該 id = "input"。在 HTML 正文中放置 JavaScript 變數時,這種 DOM 操作很方便。

程式碼片段:

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

輸出:

innrhtml

使用 document.write() 屬性在 HTML 正文中顯示 JavaScript 變數

這裡,初始化 document.write(parameter) 屬性的系統主要用於測試變數。在這種情況下,引數是 JavaScript 中定義的變數或物件。

我們將在段之前的 script 標記中宣告變數以顯示它。稍後,我們將有一個 p 標籤,在其中,另一個 script 標籤採用上層指令碼的啟動。

程式碼片段:

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

輸出:

document_write

使用 window.alert 屬性在 HTML 正文中顯示 JavaScript 變數

這是通過 DOM 操作測試你的變數的一個非常簡單的過程。

我們將定義一個 JavaScript 物件或變數並在此處儲存一個隨機值。在 script 標籤內,我們將宣告 window.alert(variable),並且該屬性將在觸發視窗物件時提示一條訊息。

程式碼片段:

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

輸出:

警報

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