HTML で JavaScript 変数を使用する

Anika Tabassum Era 2023年10月12日
  1. HTML での JavaScript ユーザー定義変数の使用
  2. プロンプトからロードされた JavaScript 変数
  3. スクリプトと HTML への変数アクセスからタグ要素を作成する
HTML で JavaScript 変数を使用する

JavaScript 変数は、コーディング中にユーザー定義されることがよくあります。または、プロンプトを使用してデータをフェッチし、さらに使用するために変数に格納することもできます。

ここでは、ユーザー定義変数を操作して HTML で使用する方法を示します。後のデモンストレーションでは、プロンプトがこの点でどのように役立つかを説明します。

HTML での JavaScript ユーザー定義変数の使用

コード例には jsbin を使用しています。ここでは、p 要素が id output によって識別されていることがわかります。最初に、変数 myPetTobey に設定され、後の単純な行が Web ページで実行されました。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 変数

このセグメントでは、プロンプトウィンドウに値を簡単に入力する方法を確認します。値は、読み込まれた Web ページに直接表示されます。

コードスニペット:

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

関連記事 - JavaScript Variable