■ボタンの有効/無効
ボタンを有効/無効にする場合は、「document.getElementById」プロパティの「disable」を使用する。
let btn = document.getElementById('ボタンのIDを指定');
// 無効
btn.disabled = true;
// 有効
btn.disabled = false;■作成するプログラムの概要
・HTMLの画面にてJavaScriptを実装する。
・「実行」ボタン押下時、「実行」ボタンを無効、10秒待機、「実行」ボタンを有効にする。
■フローチャート
■プログラム仕様
| 処理名 | 実行ボタン押下処理 |
|---|---|
| 処理概要 | ボタンを無効にする。 10秒待機する。 ボタンを有効にする。 |
| 引数 | なし |
| 戻り値 | なし |
| 入力 | 処理内容 | 出力 |
|---|---|---|
| – | ボタンのIDを取得する。 | – |
| – | ボタンを無効にする。 | – |
| – | 実行ステータスのdiv要素のIDを取得する。 | – |
| – | ■ループ処理：10回繰り返し ｜同期処理：1秒待つ ｜実行ステータスを表示する。 ■ | 【innerHTML】 実行中（n/10） |
| – | ボタンを無効にする。 | – |
| – | 終了メッセージ出力する。 | 【innerHTML】 終了 |
■画面レイアウト
・「実行」ボタン押下時、「実行」ボタンを無効、10秒待機（※）、「実行」ボタン有効
・処理終了時、【実行ステータス】を終了にする。
（※）10秒待機中、【実行ステータス】を「実行中・・・n/10」に変更する。
なお、nは秒数（加算されていく）
■サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ボタン無効</title>
</head>
<body>
<!-- 入出力設定 -->
<input type="button" value="実行" id="execute" onclick="fnc_diable()">
<br>
<br>
【実行ステータス】
<div id="exe_status">実行前</div>
<!-- ここにjavascriptを実装する-->
<script type="text/javascript">
/*
処理名
待機処理
処理概要
指定の時間分、待機する
引数
ミリ秒
戻り値
Promiseオブジェクトの状態（成功/失敗）
*/
function sleep_fnc(n) {
// nミリ秒後に一度だけ処理を呼び出す
return new Promise(function(resolve){
setTimeout(resolve, n);
});
}
/*
処理名
実行ボタン押下処理
処理概要
ボタンを無効にする
10秒待機する
ボタンを有効にする
引数
なし
戻り値
なし
*/
async function fnc_diable() {
// ボタンのIDを取得する
let btn = document.getElementById('execute');
// ボタンを無効にする
btn.disabled = true;
// 実行ステータスのdiv要素のIDを取得
let div_exe_status = document.getElementById('exe_status');
// 10回繰り返し
for(let i = 1; i <= 10; i++){
// 同期処理：1秒待つ
await sleep_fnc(1000)
// 実行ステータスを表示
div_exe_status.innerHTML = `実行中・・・${i}/10`;
}
// ボタンを有効にする
btn.disabled = false;
// 終了メッセージ出力
div_exe_status.innerHTML = '終了しました';
}
</script>
</body>
</html>
■実行結果
・実行前
・実行中（ボタン無効）
・実行終了（ボタン有効）
コメント