2種類のフォーム入力欄をボタン入力によって増やしたい

ruby
1 <%= form_with model: @recipe, url: user_recipes_path(:user_id), method: :post, id: 'new_message', local: true do |f| %>
2     
3      <%= render 'shared/error_messages', model: f.object %>  
4    
5  <div class="clear_content">
6    <div class="clear_left_content">
7       <div>
8        <%= f.label :title, "料理名", class:"cooking_name" %>
9        <%= f.text_area :title, class:"#", id:"#", placeholder: "料理名をご記入ください", size: "20x2", maxlength: "40", autofocus: true %>
10       </div>
11       <div>
12         <%= f.label :image, for:"message_image", class:"fa fa-camera fa-3x" do %>
13         <%= f.file_field :image, id:"message_image", style: "display: none;" %>
14         <div id="image-list"></div>
15         <% end %>
16       </div>
17    </div>
18    <div class="clear_right_content">
19     <div class="material_content" >     
20         <div class="material_title">
21         <span><%= f.label :material_name, "材料", class:"material_name" %></span>
22         <span><%= f.label :quantitiy_name, "分量", class:"quantity_name" %></span>
23         </div>
24           <div id="material_list", >
25             <span class="material"> 
26              <%= f.text_field :material_name, size: "20", class:"material", placeholder: '材料を入力してください' %>
27             </span>
28             <span class="quantity">
29                <%= f.text_field :quantity_name, class:"quantity", size: "20", placeholder: '分量を入力してください'%>
30             </span>
31          </div>     
32       <div id="form-add-button">
33       <p><input type="button" value="項目を追加する" class="add-memo-form-btn"></p>
34      </div>
35       <div id="form-delete-button"></div>
36       <p><input type="button" value="項目を削除する" class=""></p> 
37     </div>
38    </div>
39  </div>

java
1document.addEventListener('DOMContentLoaded', function(){
2    const addMemoBtn = document.getElementsByClassName('add-memo-form-btn')[0]
3    const formList = document.getElementsByClassName("material quantity__titles")[0]
4    let formNum = 0
5
6    addMemoBtn.addEventListener("click", function() {
7      formNum += 1
8      const formNode = document.createElement("input");
9      formNode.setAttribute("class", "material quantity");
10      formNode.setAttribute("type", "text");
11      formNode.setAttribute("name", `recipe_material_collection[materials_attributes][${formNum}][title]`);
12      formNode.setAttribute("name", `recipe_quantity_collection[quantities_attributes][${formNum}][title]`);
13      formNode.setAttribute("id", `recipe_material_collection_materials_attributes_${formNum}_title`);
14      formNode.setAttribute("id", `recipe_quantity_collection_quantities_attributes_${formNum}_title`);
15      formList.appendChild(formNode)
16     
17  })
18  })
19![イメージ説明](6366d388d636189d3f37041b7cd1d6a2.png)
20```現在料理アプリを作ろうとしていて入力フォームを作成しています
21材料名と分量名の2つの入力フォームをボタンを押すことによって追加したいです
22現状、実装した感じではボタンを押したらエラーが出てしまいます
23![![イメージ説明](dfb0e4215cea5cb29aec71e1f81ddc97.png)](100c5ab430d645798dd2e6f707c6d322.png)
24参照している場所は↓ですが
25![イメージ説明](62127a29ac53af15e96f771423a5061f.png)
26記述が間違っている云々より2種類のフォームを同時に追加する場合には
27記述が足りてない感じがしています
28現在も色んなサイトを巡ってフォーム追加について方法を探しています
29解決法がわかる方ご意見お待ちしています
30
31追記
32![イメージ説明](77a7959e905386ccc71240e961a88e38.png)
33値を変えて参照してみましたが
34値がとれていないようです
35formNodeというinputを定義してsetAttributeで属性を付加している
36nameとidにはどういった形で指定すれば属性を付加できるのかを
37知りたいです
38![![イメージ説明](daef7d9a65c7c12ca9976a47cfef1cd1.png)](d2a1c2d3f5061132c7788d7d374998ce.png)
39getElementsByClassNameでquantityを取得したところフォームが増えましたが
40増えるのは一つのみで作り出したフォームに記入して投稿しても元からあるカラムに保存できるだけでした
41引き続き検証を続けます

行動規範の内容に同意します

回答2件

material quantity__titles

これ、どこにあるのでしょう。
materialはともかくquantity__titlesはどこにもないようですが。
エラーの原因はそれかと。
JavaScriptのほうも「要素が確実に想定通りにとれているか」デバッグしてみてください。

投稿2021/01/22 22:54

m.ts10806

総合スコア80875

kengoal

2021/01/23 01:48 編集

回答ありがとうございます！値を変えて検証してみましたがdocument.getElementsByClassNameで増やしたいフォームの2つのクラスネームを取得したくてこの値で取れると思っていたのですが追記イメージのようにundefinedになってしまいます 2つの値はこの指定した形では取れないのでしょうか？

行動規範の内容に同意します