簡単なボタン機能実装について

削除ボタンを押すと、確認のメッセージが出る。

という簡単な仕組みを作っているのですが、
エラーが出ていて、困っています

touch app/javascript/button.js
をターミナルで打った後
このようなエラーが検証ツールにて出ました

ターミナル

Uncaught TypeError: document.getElementByID is not a function
    at Object../app/javascript/button.js (button.js:1)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/packs/application.js (application.js:12)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
./app/javascript/button.js @ button.js:1
__webpack_require__ @ bootstrap:19
./app/javascript/packs/application.js @ application.js:12
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

ブートストラップについてはGitHubデスクトップ上で削除したはずなのに
エラーが出ます

application.js


require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('./preview')

require('../button')
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

require('./button')でもダメでした

よくある //treeがないのが気になります

button.js

window.onload = function(){

 const btn = document.getElementById("button-javascript");

 btn.addEventListener("click",function(){
  console.log("削除しますか？");
  });
}



button.js:6 Uncaught TypeError: btn.addEventListener is not a function
    at ./app/javascript/button.js.window.onload (button.js:6)
エラー

show.html.erb


<div id="item-button-show">
     <% if user_signed_in?  && current_user.id == @book.user_id%>
      <i class="container2">  <%= link_to '編集する', "/books/#{@book.id}/edit", method: :get, class: "btn-open" %></i>
   <i class="container2">      <%= link_to '削除する', "/books/#{@book.id}", method: :delete,  class: "btn-open",id: "button"%></i>　問題点！！
     <% end %>   
  </div>

エラー

bootstrap:83 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/user/projects/Books/app/javascript/button.js: Unexpected token, expected "," (9:1)

  7 |   console.log("削除しますか？");
  8 |   });
> 9 | }

行動規範の内容に同意します

回答1件

Uncaught TypeError: document.getElementByID is not a function

document.getElementByIDは関数ではありません、といってますね

投稿2020/08/14 07:24

y_waiwai

総合スコア87774

tomsuma

2020/08/14 07:53

IDのｄは小文字じゃないとといけないんですね！勉強になります！ Uncaught TypeError: Cannot read property 'addEventListener' of null しかし、次はこのようなエラーが出てしまいます。。 if (btn != null) { if文をつけてやっても button.js:1 Uncaught ReferenceError: btn is not defined のようにエラーが起きます！

gouf

2020/08/14 07:56

コレですね : https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById ID か、Id かの違い

phiar_poet

2020/08/14 08:15 編集

おそらくですが、 const btn = document.getElementById("button"); の後にすぐ console.log(btn); を実行してもNULLが出力されませんか？？ DOMが読み込まれる前にスクリプトが走っている可能性はありませんでしょうか。

tomsuma

2020/08/14 08:27

window.onload = function(){ で囲んでも ``` button.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null at ./app/javascript/button.js.window.onload (button.js:5) ./app/javascript/button.js.window.onload @ button.js:5 load (async) ./app/javascript/button.js @ button.js:1 __webpack_require__ @ bootstrap:19 ./app/javascript/packs/application.js @ application.js:12 __webpack_require__ @ bootstrap:19 (anonymous) @ bootstrap:83 (anonymous) @ bootstrap:83 ``` というエラーが出ます、、、

行動規範の内容に同意します