HTMLにJavaScriptで計算結果を表示したい！

前提・計算機能をJavaScriptで動的に表示したい

Ruby on Rails で家計簿に関するアプリを制作しています。

計算機能を実装しようとJavaScriptで計算〜結果を表示を行おうとしましたがHTML（ブラウザ）に反映されません。

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

ScoresInput
VM64:1 Uncaught ReferenceError: ScoresInput is not defined
    at <anonymous>:1:1
(anonymous) @ VM64:1
MonthlyIncome
VM69:1 Uncaught ReferenceError: MonthlyIncome is not defined
    at <anonymous>:1:1
(anonymous) @ VM69:1
Expense 
VM74:1 Uncaught ReferenceError: Expense is not defined
    at <anonymous>:1:1
(anonymous) @ VM74:1
ScoreMonth
VM79:1 Uncaught ReferenceError: ScoreMonth is not defined
    at <anonymous>:1:1
(anonymous) @ VM79:1

該当のソースコード

Js
1function ScoresInput () {
2
3  const MonthlyIncome = document.getElementById('monthly-income-score')
4  const Expense = document.getElementById('expense-score')
5  const ScoreMonth = document.getElementById('month-score')
6
7  Expense.addEventListener('keyup', function(){
8    const MonthExpense = document.getElementById("expense-score").value;
9    const result = document.getElementById('month-score')
10    result = (`MonthlyIncome - MonthExpense`)
11    result.innerHTML = ScoreMonth
12  })
13};
14window.addEventListener('load', ScoresInput)

試したこと

他の家計簿アプリのコードを参照して自分コードに模写してたが結果は同じで表示がされない。

公式リファレンスを参照して、様々なコードや変数定義をコーディンングしたがHTMLに反映されない。

application.jsの記述

Js
1import Rails from "@rails/ujs"
2// import Turbolinks from "turbolinks"
3import * as ActiveStorage from "@rails/activestorage"
4import "channels"
5
6Rails.start()
7// Turbolinks.start()
8ActiveStorage.start()
9require("../scores_new.js")
10

docker-compose.ymlの記述

version: '3'
services:
  db:
    image: mysql:8.0
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - ./src/db/mysql_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - ./src:/app
    ports:
      - "3000:3000"
    environment:
      RAILS_ENV: development
    depends_on:
      - db