解決方法 Uncaught TypeError: Cannot read property 'value' of null at HTMLButtonElement.<anonymous>

Question

railsでチャットアプリを作っている途中でタイトルのエラーが出ました。
具体的には、

 /chat_app4/app/views/rooms/show.html.erb
<h1>Chat Room</h1>
 <input type='text' id='input' />
 <button id="button" >送信</button>
 <div id="messages">
  <%= render @messages %>
 </div>

/chat_app4/app/views/messages/_message.html.erb
<p><%= message.content %></p>

/chat_app4/app/assets/javascripts/channels/room.js
App.room = App.cable.subscriptions.create("RoomChannel", {
  connected: function() {
    console.log('connected')
    // Called when the subscription is ready for use on the server
  },

  disconnected: function() {
    // Called when the subscription has been terminated by the server
  },

  received: function(data) {
    alert(data)
    
    // Called when there's incoming data on the websocket for this channel
  },

  speak: function(content) {
    return this.perform('speak', {message: content});
  }
});

document.addEventListener('DOMContentLoaded', function(){
  const input = document.getElementById('chat-input')
  const button = document.getElementById('button')
  button.addEventListener('click', function(){
    const content = input.value
    App.room.speak(content)
    input.value = ''
  })
})

/chat_app4/app/channels/room_channel.rb
class RoomChannel < ApplicationCable::Channel
  def subscribed
    stream_from "room_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    Message.create!(content: data['message'])
    ActionCable.server.broadcast 'room_channel', data['message']
  end
end

今こういった状態なのですが、サーバーで何かしらのメッセージを打ち、
送信を押すと、サーバのconsoleに
Uncaught TypeError: Cannot read property 'value' of null at HTMLButtonElement.<anonymous>
のエラーメッセージが出ます。
自分的には、アラートに入力したメッセージが出てきてほしかったです。
どこを直せばいいか教えていただきたいです。

Comments

[退会済みユーザー]

エラーメッセージの意味は調べましたか？

Uncaught TypeError: Cannot read property 'value' of null at HTMLButtonElement.<anonymous>

`HTMLButtonElement.<anonymous>`の要素`null`に対するプロパティー`value`が読み取れません

といった具合のエラーメッセージだと思うのですが...。
このエラーメッセージを読めば、どこがおかしいか、期待する値が取れていない箇所はどこなのかの目星くらいはつくと思います。
その上で何かエラーに対して試して見たこと、調べたことなど書かないと丸投げになってしまいますよ。

Answer 1

単純にIDが間違っているのだと思われます。

<input type='text' id='input' />

const input = document.getElementById('chat-input')

Comments

[JumpeiSuzuki]

改善されました。
単純なミスに気づかなくてお恥ずかしいですが、とても助かりました。
ありがとうございました。