入力できるようにする

画面に入れた文字をJavaScriptで受け取る

前のページでは、HTML、CSS、JavaScriptでアプリの土台を作りました。

今回は、入力欄に入れた文字をJavaScriptで受け取れるようにします。

ここができると、アプリは少しだけ「反応する道具」になります。

今回やること

• 入力欄に文字を入れる
• ボタンを押す
• 入力した文字をJavaScriptで取得する
• 結果エリアに表示する 流れはこうです。

入力する
↓
ボタンを押す
↓
JavaScriptが文字を読む
↓
画面に表示する

まず確認するコード

前回のコードには、入力欄があります。

<input
  id="themeInput"
  type="text"
  placeholder="例：学校祭のお知らせ"
/>

大事なのは、この部分です。

id="themeInput"

JavaScriptは、この id を目印にして入力欄を探します。

JavaScriptで入力欄を取得する

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;
    const tone = toneSelect.value;

    resultText.textContent =
      '入力されたテーマ：' + theme + '\n' +
      '選ばれた雰囲気：' + tone;
  });
</script>

何が起きているか

• document.getElementById('themeInput') HTMLの中から、id="themeInput" の部品を探す

• themeInput.value 入力欄に入っている文字を取り出す

• toneSelect.value 選択された雰囲気を取り出す

• resultText.textContent 結果エリアの文字を書き換える

動かしてみる

ブラウザで開いて、次のように入力します。

投稿テーマ：
学校祭のお知らせ

投稿の雰囲気：
明るい

ボタンを押します。

結果エリアに、次のように表示されれば成功です。

入力されたテーマ：学校祭のお知らせ
選ばれた雰囲気：明るい

空欄チェックを入れる

入力欄が空のままでも動いてしまうと、アプリとして少し分かりにくいです。

次に、空欄だったら注意文を出すようにします。

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;
    }

    resultText.textContent =
      '入力されたテーマ：' + theme + '\n' +
      '選ばれた雰囲気：' + tone;
  });
</script>

.trim()** とは**

.trim() は、文字の前後の空白を消す命令です。

例えば、次のような入力でも、

学校祭のお知らせ

JavaScript側では、こう扱いやすくなります。

学校祭のお知らせ

自分のアプリに合わせて変える

SNS投稿メーカーではなく、課題優先順位診断にするなら、表示文を変えます。

resultText.textContent =
  '入力された課題：' + theme + '\n' +
  '選ばれた種類：' + tone;

勉強計画メーカーにするなら、こうです。

resultText.textContent =
  '学習テーマ：' + theme + '\n' +
  '学習スタイル：' + tone;

課題

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

完了条件

次の状態になればOKです。

• 入力欄に文字を入れられる
• ボタンを押せる
• 入力した文字が結果エリアに表示される
• 空欄のときに注意文が出る 次のページでは、

ボタンで結果を出す

に進みます。