NEW ARTICLE
kotlin formatを使用して数値の0埋めを行う
  1. HOME
  2. javascript
  3. javascript テキストフォームの値がundefinedになって取得できない

javascript テキストフォームの値がundefinedになって取得できない

javascript テキストフォームの値がundefinedになって取得できない

javascriptで、テキストフォームの値がundefinedになって取得できない場合の原因と解決方法を記述してます。

目次

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 104.0.5112.81
Javascript サンプル集はこちら

テキストフォームの値がundefinedになって取得できない

以下の、ボタンクリック時にテキストフォームに入力された値を取得しようとした際に発生。

<p id="txt">sample</p>

<input id="txt" type="text"/>
<button id="btn">button</button>

<script>

document.getElementById('btn').addEventListener('click', function(){
    console.log(document.getElementById('txt').value)
})

</script>

実行結果を見ると、「undefined」となってます。

原因

同じid名「txt」が複数あるため。実際、自分の場合はもっと長いコードだったので、少しハマりました。

<p id="txt">sample</p>

<input id="txt" type="text"/>

解決方法

別のidを指定する

<p id="foo">sample</p>

<input id="txt" type="text"/>
<button id="btn">button</button>

<script>

document.getElementById('btn').addEventListener('click', function(){
    console.log(document.getElementById('txt').value)
})

</script>

実行結果