質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1337閲覧

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

t.togashi

総合スコア22

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/03/29 06:43

前提・実現したいこと

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

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

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

該当のソースコード

erb

1<%= form_with model: Overtime.new do |form| %> 2 3 <div class="input-group"> 4 <div class="input-group-prepend"> 5 <span class="input-group-text">日付</span> 6 </div> 7 <%= form.date_field :date, class: 'form-control', id: "new-calendar" %> 8 </div> 9 10 <div class="input-group mt-3"> 11 <div class="input-group-prepend"> 12 <span class="input-group-text">開始時刻</span> 13 </div> 14 <%= form.time_select :work_start_time, class: 'form-control', required: true %> 15 </div> 16 17 <div class="input-group mt-3"> 18 <div class="input-group-prepend"> 19 <span class="input-group-text">終了時刻</span> 20 </div> 21 <%= form.time_select :work_end_time, class: 'form-control', required: true %> 22 </div> 23 24 <div class="input-group mt-3"> 25 <div class="input-group-prepend"> 26 <span class="input-group-text">残業時間</span> 27 </div> 28 <%= form.text_field :work_time, class: 'form-control', id: "work-time", readonly: true, required: true %> 29 </div> 30 31 <div class="form-group mt-3"> 32 <%= form.submit '新規登録', class: 'btn btn-primary btn-block' %> 33 </div> 34 35<% end %>

javascript

1document.addEventListener('turbolinks:load', () => { 2 3 // フォームにtime_selectを使用すると自動的にidが付与される 4 const workStartTimeHour = document.getElementById("overtime_work_start_time_4i") 5 const workStartTimeMinute = document.getElementById("overtime_work_start_time_5i") 6 const workEndTimeHour = document.getElementById("overtime_work_end_time_4i") 7 const workEndTimeMinute = document.getElementById("overtime_work_end_time_5i") 8 const workTime = document.getElementById("work-time") 9 10 console.log(workTime) 11 12 workEndTimeMinute.addEventListener('change', function(){ 13 14 let workStartTimeValueConvertedToMinute = (Number(workStartTimeHour.value * 60) + Number(workStartTimeMinute.value)) 15 let workEndTimeValueConvertedToMinute = (Number(workEndTimeHour.value * 60) + Number(workEndTimeMinute.value)) 16 17 let workTimeMinuteValue = (workEndTimeValueConvertedToMinute - workStartTimeValueConvertedToMinute) 18 console.log(workTimeMinuteValue) 19 let workTimeValue = `${Math.floor(workTimeMinuteValue / 60)}:${workTimeMinuteValue % 60}` 20 console.log(workTimeValue) 21 workTime.innerHTML = workTimeValue 22 }); 23 24})

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

投稿2020/03/29 10:24

t.togashi

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問