JavaScriptでブラウザ上でコンファームを表示させることができるconfirm()メソッドの使い方

confirm()メソッドの使い方

JavaScriptでブラウザ上で確認ダイアログを表示させるにはconfirm()メソッドを使います。

「OK」ボタンを押すと、trueが返り、「キャンセル」ボタンを押すとfalseが返されます。

実際の開発では、この真偽値判定によって次に行う処理を振り分けることになります。

メソッド

メソッド意味返り値
confirm(メッセージ)確認ダイアログを表示真偽値

サンプルコード

サンプルコードとして、ボタンを押すと、確認ダイアログを表示し、「OK」を押すと「今日の日付」を表示するサンプルコードを紹介します。

Output
Pug
button#button.mb-4 Button
 div#pushconfirm
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const pushConfirm = document.getElementById('pushconfirm');

// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.getElementById('button').addEventListener('click', onClickAction);

/** ボタンをクリックと関数を実行 */
function onClickAction() {
	//コンファームを表示
	const dateInstance = new Date();
	const checkConfirm = confirm('今日の日付を表示しますか?'); //結果の真偽値を格納
	if ( checkConfirm ) {
		pushConfirm.textContent = `こんにちは!今日の日付は${dateInstance.getFullYear()}年${dateInstance.getMonth() + 1}月${dateInstance.getDate()}日です。`;
	}
}
インストラクター
コメント

コメントを残す