JavaScriptでConfirmとPromptを組み合わせた計算機能の実装方法

JavaScriptを使って、ユーザーに確認を求めるConfirm窓を表示し、OKボタンを押したときにだけ、Prompt窓を3回表示させる方法について解説します。また、キャンセルボタンが押された場合、背景色を黄色に変更し、計算を行わないメッセージを表示するプログラムを作成します。

1. ConfirmとPromptを使った基本的な流れ
2. コードの修正ポイント
1. 2.1. Confirm窓とPrompt窓を連携させる
2. 2.2. キャンセルの場合の処理
3. 修正後のコード例
4. まとめ: 確認と入力の連携処理

1. ConfirmとPromptを使った基本的な流れ

まず、ユーザーに対して「計算を行いますか？」という確認をするConfirm窓を表示し、その後OKボタンが押されたときに数値を入力するPrompt窓を3回表示します。計算結果は合計と平均を表示します。キャンセルボタンがクリックされた場合は、計算は行わず、背景色を黄色に変えます。

2. コードの修正ポイント

質問のコードに必要な修正を加え、実際に動作するようにします。まず、Confirm窓を表示し、その後OKボタンが押された場合のみPrompt窓を表示するようにします。そして、Prompt窓を使って数値を3回入力させ、それらの合計と平均を表示します。

2.1. Confirm窓とPrompt窓を連携させる

最初にConfirm窓を表示し、ユーザーがOKを押した場合にだけ、Prompt窓を3回表示する処理を追加します。次に、入力された数値を合計し、平均を計算して表示します。

2.2. キャンセルの場合の処理

Confirm窓でキャンセルを選んだ場合、背景色を黄色に変え、「計算は行いません」というメッセージを表示します。

3. 修正後のコード例

以下の修正されたコードは、Confirm窓とPrompt窓を連携させ、キャンセル時の処理も追加しています。

<html>
<head>
</head>
<body>
<script type="text/JavaScript">
// 最初にConfirm窓を表示
let isConfirmed = confirm("計算を行いますか？");

if (isConfirmed) {
  // OKボタンがクリックされた場合
  let sum = 0;
  let qnt = 3;

  for (let i = 0; i < qnt; i++) {
    let v = +prompt("数値を入力");
    sum += v;
  }

  let ave = sum / qnt;
  alert("合計：" + sum + "\n平均：" + ave);
} else {
  // キャンセルボタンがクリックされた場合
  document.body.style.backgroundColor = "yellow";
  alert("計算は行いません");
}
</script>
</body>
</html>