ボタンで結果を出す

入力内容をもとに画面を変える

前のページでは、入力欄の文字を受け取れるようにしました。

今回は、ボタンを押したら結果を作るようにします。

流れはこれです。

入力する
↓
ボタンを押す
↓
条件に合わせて結果を作る
↓
画面に表示する

コード例

script の中を次のようにします。

<script>
  const themeInput = document.getElementById('themeInput');
  const toneSelect = document.getElementById('toneSelect');
  const generateButton = document.getElementById('generateButton');
  const resultText = document.getElementById('resultText');

  generateButton.addEventListener('click', () => {
    const theme = themeInput.value.trim();
    const tone = toneSelect.value;

    if (theme === '') {
      resultText.textContent = 'テーマを入力してください。';
      return;
    }

    const result =
      'テーマ：' + theme + '\n' +
      '雰囲気：' + tone + '\n\n' +
      tone + '雰囲気で、' + theme + 'について伝える内容を作りましょう。';

    resultText.textContent = result;
  });
</script>

ポイント

• click ボタンが押された時に動く

• value 入力された文字を受け取る

• if 空欄かどうかを確認する

• textContent 結果表示エリアを書き換える

課題

次の3つを変更してください。

完了条件

• ボタンを押すと結果が表示される
• 入力内容が結果に反映される
• 空欄のときに注意文が出る