javascript dirnameの値が取得できない

javascript dirnameの値が取得できない

javascriptで、dirnameの値が取得できない場合の対処法を記述してます。

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 105.0.5195.102

ソースコード

以下のコードを実行して「dirname」の値を取得しようとすると取得できませんでした。

<input id="hoge" type="text" name="hoge" dirname="name-dir" />
<input id="btn" type="button" value="ボタン" />

<script>

'use strict';

document.getElementById('btn').onclick = function(){

  const elm = document.getElementById('hoge')
  // コンソールに出力
  console.log(elm.dirname);

}

</script>

実行結果

原因

「dirname」の「name」は「Name」と大文字を使用する必要があるため。
以下のように「dirName」とすれば、正しく取得することができます。

<input id="hoge" type="text" name="hoge" dirname="name-dir" />
<input id="btn" type="button" value="ボタン" />

<script>

'use strict';

document.getElementById('btn').onclick = function(){

  const elm = document.getElementById('hoge')
  // コンソールに出力
  console.log(elm.dirName);

}

</script>