HTML で JavaScript 変数を使用する
Anika Tabassum Era
2023年10月12日
JavaScript 変数は、コーディング中にユーザー定義されることがよくあります。または、プロンプトを使用してデータをフェッチし、さらに使用するために変数に格納することもできます。
ここでは、ユーザー定義変数を操作して HTML で使用する方法を示します。後のデモンストレーションでは、プロンプトがこの点でどのように役立つかを説明します。
HTML での JavaScript ユーザー定義変数の使用
コード例には jsbin を使用しています。ここでは、p 要素が id output によって識別されていることがわかります。最初に、変数 myPet は Tobey に設定され、後の単純な行が 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!';
出力：
プロンプトからロードされた 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 への変数アクセスからタグ要素を作成する
ここでは、スクリプトに 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);
出力：
