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

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> 
のエラーメッセージが出ます。
自分的には、アラートに入力したメッセージが出てきてほしかったです。
どこを直せばいいか教えていただきたいです。