htmlファイルから外部のjavascriptファイルが読み込めない．document.getElementByIdという関数は読み込めないのですか？

前提・実現したいこと

実現したいこと：htmlファイルからjavascriptファイルを読み込み，表示させたい．

javascriptを本を見ながら勉強しています．本の例題でhtmlファイルからjavascriptをファイルを読み込むことをしているのですが，本の通りにプログラムを書いてもjavascriptファイルが表示されません．理由が分かる方ぜひ答えていただけると幸いです．
プログラムをvisualスタジオで書いていて，書いたファイルはfirefoxにドラッグ＆ドロップすることで表示させています．
htmlファイルとjavascriptファイルは同じフォルダー内にあります．

発生している問題・エラーメッセージ

該当のソースコード

htmlファイル名：
sample.html

中身：

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>[タイトル]</title> </head> <body> <header> <h1>[タイトル]</h1> </header>

javascriptファイル名:
sample.js

中身:
document.getElementById('btnClose').onclick=function(){
if(confirm('閉じてもよろしいですか？')){
window.close();
}else{
alert('閉じるのを中止しました．');
}
}

試したこと

最初は読み込むためにhtmlファイルに記述したjavascriptファイルのパスが間違っていると考え，いろいろ変えてみたが変化はなかった．次にjavascriptファイルの内容を下記の内容に書き換えると表示された．このことより，document.getElementByIdという関数？が読み込めないのだと考えている．

ファイルの中身：
window.alert('保存\vしました．');