導入
viewファイルにJSを以下のように記載することはあまりコードとしてよろしくないので、適切な箇所に記載するようにします。
form.html.erb
|
|
<script>
document.addEventListener("DOMContentLoaded", () => {
const todayButton = document.getElementById("today-button");
const visitDayField = document.getElementById("content_visit_day");
todayButton.addEventListener("click", () => {
const today = new Date().toISOString().split("T")[0];
visitDayField.value = today;
});
});
</script>
手順
JSのファイルを作成したのは、app/javascriptフォルダ内にしました。
このファイルに記述した内容は、どのViewでも使うことができます。
app/javascrip/script.js
document.addEventListener("DOMContentLoaded", () => {
const todayButton = document.getElementById("today-button");
const visitDayField = document.getElementById("content_visit_day");
todayButton.addEventListener("click", (event) => {
event.preventDefault();
const today = new Date().toISOString().split("T")[0];
visitDayField.value = today;
});
});
※ここの記述は、フォームに「本日ボタン」を作るためのものです。
次にapp/javascript/packs/application.jsに上記で作成したファイルをimportしました。
app/javascrip/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "script.js"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
以上で、viewファイルにJSが動作すると思います。
Comments
Let's comment your feelings that are more than good