JS getElementByIdで下の行に書いたinnerHTMLのタグのidを取得できてるのは何故か?

Question

ファイル操作のポートフォリオを作っているものです。
疑問に思ったことがあったので投稿しました。

定数の部分でgetElementByIdの'sample'と'sampleCurrentTime'が下の行に存在する。かつonloadされてからじゃないと生成されないのになぜ要素を取得することができるのか謎です。エラーがでるイメージですが、そのidは存在しませんよと。
このもやもやを解決したいです。回答お待ちしてます。

コード
const sound = document.getElementById('sound');
const audition = document.getElementById('audition');
const currentTime = document.getElementById('currentTime');
const elementReference = document.getElementById('sample');
const sampleCurrentTime = document.getElementById('sampleCurrentTime');

const fileTitle = () => {
            const files = sound.files;
            const reader = new FileReader();
            const audio = new FileReader();
            const url = reader.readAsDataURL(files[0]);
            
            reader.onload = () => {
                dataUrl = reader.result;
                document.getElementById('sample').remove();
                audition.innerHTML = '<audio src="' + dataUrl + '"controls id="sample"></audio>';
                currentTime.innerHTML = '<input type="range" value="0" id="sampleCurrentTime" min="0"   step="1"  onchange="setCurrentTime(this.value)">';
               };
            }

sound.addEventListener('change', fileTitle);

コード
<input class="upload_hidden offset-9" type="file" id="sound" accept="audio/*" name="sound">
<div id="audition"><audio id="sample"></audio></div>
<div id="currentTime"></div>

Answer 1

エラーがでるイメージですが、そのidは存在しませんよと。

たとえ取得に失敗しても、document.getElementByIdはエラーにはなりません。黙ってnullを返します。

Comments

[fuyukixxx]

エラーになるイメージでしたが確かにnullですね。回答ありがとうございました。

Answer 2

const elementReference = document.getElementById('sample');

const sampleCurrentTime = document.getElementById('sampleCurrentTime');

これは「実行結果を変数に受けているだけ」です。
エラーを出したければ何かしらで参照させてください。

console.log(elementReference.id);
//Uncaught TypeError: elementReference is null

仕様としても明記されています。

Document.getElementById()

返値
指定された ID に一致する DOM 要素オブジェクトを記述した Element オブジェクト、または**文書内に一致する要素がなければ null **です。

なのでエラーがでるイメージですが、そのidは存在しませんよと。のようにイメージではなく、仕様を確認してください。プログラムは書いたとおりに、その言語の仕様通りに動く。思った通りには動かない。

Comments

[fuyukixxx]

エラーが出るイメージと思い込むことに、今後気をつけたいと思います。
頭の整理ができました。ありがとうございます。
デバックすることにも、もう少し意識します。

[m.ts10806]

debugなのでデバックではなくデバッグです。
「メソッドの戻り値を確認する」癖をつけると良いかと思います。
「書いたとおりに動く」ということも忘れないようにしてください。