JavaScriptでinput要素のvalueプロパティを使用する方法

2024-02-09 23:42 JavaScript input要素 valueプロパティ

この記事では、JavaScriptを使用してinput要素のvalueプロパティを操作する方法について説明します。以下に、いくつかのコード例を示します。

  1. input要素の値を取得する方法:

    const inputElement = document.getElementById('myInput');
const value = inputElement.value;
console.log(value);

  2. input要素の値を設定する方法:

    const inputElement = document.getElementById('myInput');
inputElement.value = '新しい値';

  3. input要素の値が変更された時にイベントを処理する方法:

    const inputElement = document.getElementById('myInput');
inputElement.addEventListener('input', function(event) {
const value = event.target.value;
console.log(value);
});

  4. フォームが送信された時にinput要素の値を取得する方法:

    const formElement = document.getElementById('myForm');
formElement.addEventListener('submit', function(event) {
event.preventDefault(); // フォームのデフォルトの送信動作をキャンセル
const inputElement = document.getElementById('myInput');
const value = inputElement.value;
console.log(value);
});

これらのコード例を使用することで、input要素のvalueプロパティを取得したり設定したりすることができます。必要に応じて、イベントリスナーを使用して値の変更を監視することもできます。これにより、フォームの入力値を確認したり、処理したりすることができます。

以上が、JavaScriptでinput要素のvalueプロパティを操作する方法についての解説です。