######やりたいこと
3つの入力フォーム(A B C)があります。
Aを入力すると、Bのフォームが表示される。
Bのフォームが入力されると、Cのフォームが表示されるようにしたいです。
思い通りに表示ができず困っています。教えていただけると助かります。
######コード
```
html
<div class="items-form">
<div class="items">
hoge1
<span class="necessary">必須</span>
</div>
<%= f.collection_select(:A_id, A.all, :id, :name, {}, {class:"select1", id:"item-A"}) %>
<div class="items"> hoge2 <span class="necessary">必須</span> </div> <%= f.collection_select(:B_id, B.all, :id, :name, {}, {class:"select2 hidden1", id:"item-B"}) %> <div class="items"> hoge3 <span class="necessary">必須</span> </div> <%= f.collection_select(:C_id, C.all, :id, :name, {}, {class:"select3 hidden2", id:"item-C"}) %> </div>
css
.hidden1{
display: none;
}
.hidden2{
display: none;
}
JS
window.addEventListener('load', function(){
const itemA = document.getElementById("item-A");
const itemB = document.getElementById("item-B");
const itemC = document.getElementById("item-C");
itemA.addEventListener('onchange', function(){
if(itemA.value != 1) {
itemB.removeAttribute("style", "display:none;")
} else {
itemB.setAttribute("style", "display:block;")
}
});
});
######バージョン ruby '2.6.5' ######エラー解決に向けて行ったこと 各行にconsole.log("Hello")を加えて、どこで引っかかっているのか確かめました。 onchangeイベント時に、処理が行えなくなりました。 現状、cssで設定しているdisplay:none;が適用されていて、入力フォームAだけブラウザに表示されています。 エラーは無い状態で、onchangeイベント内のどこが違うのか分かりません。 ご協力頂けると幸いです。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。