[JavaScript] ブラウザ上の要素の表示/非表示を切り替えたい

railsでアプリケーションを作成しています。
Javascriptを使用してボタンのクリックで要素の表示/非表示を切り替えたいのですが、クリックをしても動きがない状況です。
コンソールを確認したところUncaught TypeError: Cannot set property 'onclick' of nullというエラーが表示されるのですがなぜnullになるのかがわかりません。
各ページのコードは以下のようになっています。

html.erb

html
1  <button type=button id="info-btn" >ログイン情報</button>  
2  <div class="login-info" id="js-login-info">
3   <p>アドレス：hoge <br>パスワード：hogehoge</p>
4  </div>

css
1.login-info { 
2  display: none;
3}

js
1document.getElementById("info-btn").onclick = function(){
2  const loginInfo = document.getElementById("js-login-info");
3  if(loginInfo.style.display=="block"){
4    loginInfo.style.display = "none";
5  }else{
6    loginInfo.style.display = "block";
7  };
8};

application.jsは以下のとおりです。

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../map")
require("../click")←ここで該当のjsファイルを読み込んでいます。

エラー文章の中にbootstrapという記述があるのですがbootstrapの読み込みが関係しているのでしょうか？
(以下エラー文です。）

click.js:16 Uncaught TypeError: Cannot set property 'onclick' of null
    at Object../app/javascript/click.js (click.js:16)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/packs/application.js (application.js:7)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

わかる方いましたら教えていただきたいです。
よろしくお願いいたします。