JavaScript のアラートボックスに変数値を表示する
この記事では、JavaScript で alert() メソッドを使用する方法を学びます。アラートボックスを使用して、メッセージやその他の有用な情報を Web ページ上のユーザーへのポップアップとして表示する方法を学習します。
JavaScript のアラートボックスに変数値を表示する
ポップアップに値を表示するには、アラートボックスを使用する必要があります。デフォルトでは、ポップアップダイアログを非表示にしたり閉じたりするための OK ボタンが含まれています。
ユーザーが Web ページを操作するとき、ほとんどの場合、開発者はアラートボックスを使用してユーザーに有用なメッセージを伝える必要があります。たとえば、ユーザーがクライアント側からサーバーにデータをアップロードすると、検証後、Web ページのポップアップダイアログに成功または失敗のメッセージが表示されます。
警告ボックスは、アクティブな Web ページからユーザーのフォーカスを削除し、ユーザーに警告メッセージを読ませる。
JavaScript では、デフォルトの alert() メソッドは、連結演算子+ を使用して、アラートメッセージ、変数値、およびテキストを変数とともに表示できます。
基本構文：
let data = 'hello world'
alert(data);
上に示したように、引数として alert() メソッドに値または変数を渡すだけで済みます。
例：
<html>
<head>
<title> display JavaScript alert </title>
</head>
<script>
function showPopup()
{
var data = document.getElementById("value").value;
//check empty data field
if(data == "")
{
alert("Please enter any value..");
}
else
{
alert("Your entered value is: "+data); //display variable along with the string
}
}
</script>
<body>
<h1 style="color:blueviolet">DelftStack</h1>
<h3>JavaScript display alert box</h3>
<form onsubmit ="return showPopup()">
<!-- data input -->
<td> Enter Value: </td>
<input id = "value" value = "">
<br><br>
<input type = "submit" value = "Submit">
</form>
</body>
</html>
上記の HTML ソースコードの form 要素を使用して、ユーザー入力フィールドと Submit ボタンを作成しました。ユーザーは値を挿入し、ユーザーが Submit ボタンをクリックすると、関数 showPopup() がトリガーされます。
スクリプトタグでは、showPopup() 関数を宣言しました。この関数では、data 変数のユーザー入力値を取得し、条件ステートメント if を使用して data が空かどうかを確認します。
data 変数が空の場合、エラーメッセージとともにアラートが表示されます。それ以外の場合は、data 変数を含む成功メッセージが表示されます。