要素に値を入力したい javascript rails

Question

前提・実現したいこと

railsで作成したフォームへユーザーが入力した値を元にして、別のフォームに値が自動入力されるようにしたいと考えています。
具体的には、ユーザーが開始時間及び終了時間を入力すると、その差分の時間が自動的に入力される、という具合です。
アドバイスを頂けますと幸いです。

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

終了時間の「分」を変更すると、javascriptのイベントが発火し、上記が実現するようにしているつもりなのですが、フォームには入力がなされず空のままです。

該当のソースコード

<%= form_with model: Overtime.new do |form| %>

  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">日付</span>
    </div>
    <%= form.date_field :date, class: 'form-control', id: "new-calendar" %>
  </div>

  <div class="input-group mt-3">
    <div class="input-group-prepend">
      <span class="input-group-text">開始時刻</span>
    </div>
    <%= form.time_select :work_start_time, class: 'form-control', required: true %>
  </div>

  <div class="input-group mt-3">
    <div class="input-group-prepend">
      <span class="input-group-text">終了時刻</span>
    </div>
    <%= form.time_select :work_end_time, class: 'form-control', required: true %>
  </div>

  <div class="input-group mt-3">
    <div class="input-group-prepend">
      <span class="input-group-text">残業時間</span>
    </div>
    <%= form.text_field :work_time, class: 'form-control', id: "work-time", readonly: true, required: true %>
  </div>

  <div class="form-group mt-3">
    <%= form.submit '新規登録', class: 'btn btn-primary btn-block' %>
  </div>

<% end %>

document.addEventListener('turbolinks:load', () => {

  // フォームにtime_selectを使用すると自動的にidが付与される
  const workStartTimeHour = document.getElementById("overtime_work_start_time_4i")
  const workStartTimeMinute = document.getElementById("overtime_work_start_time_5i")
  const workEndTimeHour = document.getElementById("overtime_work_end_time_4i")
  const workEndTimeMinute = document.getElementById("overtime_work_end_time_5i")
  const workTime = document.getElementById("work-time")

  console.log(workTime)

  workEndTimeMinute.addEventListener('change', function(){

    let workStartTimeValueConvertedToMinute = (Number(workStartTimeHour.value * 60) + Number(workStartTimeMinute.value))
    let workEndTimeValueConvertedToMinute = (Number(workEndTimeHour.value * 60) + Number(workEndTimeMinute.value))

    let workTimeMinuteValue = (workEndTimeValueConvertedToMinute - workStartTimeValueConvertedToMinute)
    console.log(workTimeMinuteValue)
    let workTimeValue = `${Math.floor(workTimeMinuteValue / 60)}:${workTimeMinuteValue % 60}`
    console.log(workTimeValue)
    workTime.innerHTML = workTimeValue
	});

})

試したこと

上記JavaScript文に記載の通り、console.log()にて、入力先とするフォームの要素(workTime)が取得できているか、及び入力したい値(workTimeValue)が準備できているかを確認しました。
consoleの表示は想定通りであり、エラーメッセージは出ませんでした。

Answer 1

javascriptのコードを、
workTime.innerHTML = workTimeValue
としていたところを、
workTime.value = workTimeValue
として解決できました。