javascriptから送られてきたデータをHTMLのinput要素に入れたいです。

Question

前提・実現したいこと

チェックボックスにチェックされた数をカウントし、
そのカウントした数字をform_withのテキストフィールドに、自動で入力されるようにしたいです。

###　現状
チェックボックスにチェックされた数をjavascriptで、カウントできています。
innerHTMLを使って、カウントされた数字を表示させる事はできています。
この数字を、なんとかテキストフィールドに入力されるようにしたいのですが、可能でしょうか？
可能であれば、教えていただきたいです。よろしくお願いします。

該当のソースコード

function countCheckedCheckbox(elements, sumElement, logname) {
  let count = 0;
  for (let i = 0; i < elements.length; i++){
    if (elements[i].checked){
      count = count + 1;
    }
  }

  console.log(`${logname}の合計は${count}です`);
  sumElement.innerHTML = count;
}

function checkbox() {

  const checksA = document.getElementsByClassName("checks_one");
  const checksB = document.getElementsByClassName("checks_two");

  const btn = document.getElementById("btn")
  btn.addEventListener("click", () => {
    
    const countSumA = document.getElementById("sum_one")
    const countSumB = document.getElementById("sum_two")


    countCheckedCheckbox(checksA, countSumA, "タイプA");
    countCheckedCheckbox(checksB, countSumB, "タイプB");

  })
}
window.addEventListener("load",checkbox)

###試したこと

以下のようにform_withを使えばいけるかなと思ったのですが、いけなかったです。
よろしくお願いいたします。

      <%= form_with model: @type, local: true do |f| %>
        <%= f.text_field id:"sum_one" %>
        <%= f.submit "登録", class:"register-btn" %>
      <% end %>

Answer 1

innerHTMLは指定した要素の内部にテキストを入れ込む機能です。
内部とは<p></p>→<p>あいうえお</p>こうなること。

テキストフィールド　つまりinputのtype=valueに値を指定したい場合、
inputのvalue属性に値を指定します。

属性はプロパティで対応します。

countSumA = document.getElementById("hogehoge")
countSumA.value = fugafuga;

※value属性の値参照も.valueで出来ます。

Comments

[beginner.tanaka]

回答いただきありがとうございます！
無事に解決することができました！！！