Rails7で読み込んだ自作JavaScriptが動作しない
Q&A
Closed
発生している問題・エラー
1．読み込みが成功した場合（scriptタグで指定した場合）:
「タグ1」というボタンをクリックするとテキストエリアにタグ1という文字が挿入される
2．失敗した場合（今回）:
ボタンを押しても無反応
参考までに、サーバーを立てて表示させたhtml上のソースを記載します。
show
<script type="importmap" data-turbo-track="reload">{
"imports": {
...
"edit_tag": "/assets/edit_tag-b6b8dceba978b16bb014d6486b39687fe5b4f8baef73df6ffdfc84c99896bcea.js"
...
}
}</script>
...
<script type="module">import "edit_tag"</script>
...
<input type="button" id="tag1" value="タグ1" onclick="addTag1();">
<br>
<textarea id="tag" name="tag">
</textarea>
該当するソースコード
application.html.erb
<head>
...
<%= javascript_importmap_tags %>
<%= yield(:head) %>
</head>
show.html.erb
<% content_for :head do %>
<%= javascript_import_module_tag "edit_tag" %>
<% end %>
<input type="button" id="tag1" value="タグ1" onclick="addTag1();">
<br>
<textarea id="tag" name="tag">
</textarea>
importmap.rb
pin "edit_tag"
edit_tag.js
function addTag1() {
var UserString = document.getElementById('tag1').value;
document.getElementById('tag').value += UserString + ",";
}
自分で試したこと
importmapのドキュメントを見てやってます。
https://github.com/rails/importmap-rails#selectively-importing-modules
それ以外にググって出てきたRails7のカスタムJavaScript読み込みのやり方は大体試しました（5個くらい）が、動きませんでした。
なんとなく、turboが悪さをしている予感はしています。が、もっと根本的な部分で理解できていないことがあるかもしれないと思い、質問させていただきました。
追記2023/07/05
自己解決しました。
https://note.com/everyleaf/n/n5c0f123b20a6#17ca34f9-cf23-49a0-b1a8-df804e3bd14a
のその他対応策2のやり方でいけました。
※実際はyield(:head)で入れ込んでます
<head>
...
<meta name="turbo-visit-control" content="reload">
</head>
0
