データベースにデータを追加したいのにエラーが出る(firestore)

Question

前提・実現したいこと

firebaseのcloud firestoreを使ってユーザーが入力した情報をデータベースに保存しようとしています。しかしエラーが出て困っています。どう解決したらいいのでしょうか。

エラーメッセージ

Uncaught FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: a custom NodeList object (found in field title)

コード

  function adddata() {
  const udemae = document.getElementById('udemae');
  const title = document.getElementsByName('title');
  const text = document.getElementsByName('text');
  const radioList = udemae.power;
  const valuepower = radioList.value;

  console.log(valuepower);

    var db = firebase.firestore();
    db.settings({
      timestampsInSnapshots: true
    });
    var collectionLower = db.collection('postLower');
    var collectionHigher = db.collection('postHigher');
    if (valuepower === 'C-~A+') {
      collectionLower.add({
        title: title,
        text: text,
        power: valuepower
      })
    }  else {
      collectionHigher.add({
        title: title ,
        text: text,
        power: valuepower
      })
    }
  }

<form id="udemae">
      <input type="text" name="title" value="">
      <textarea name="text" rows="4" cols="80"></textarea>
      <input type="radio" name="power" value="C-~A+">C-~A+
      <input type="radio" name="power" value="S~X">S~X

      <input type="button" value="募集する" onclick="adddata()">

</form>

試したこと

const title = document.getElementsByName('title');
const text = document.getElementsByName('text');

ここを消して追加するデータのtitleとtextを文字列で指定するとエラーが出ず、うまくいきました。

Answer 1

ここを消して追加するデータのtitleとtextを文字列で指定するとエラーが出ず、うまくいきました。

ということはエラーの原因はdocument.getElementsByName()にあるとわかります。
このようなときは、console.log(title)などで中身を確認してみると解決法の糸口が掴めることが多いので、次回から試してみてください。

このメソッドが返す値はNodeListです。
参考：Document.getElementsByName() - Web API | MDN

上記リンクの例を見てもわかるように、NodeListは配列のようなものです。
getElementsByNameで指定したnameと合致するものを、
documentの中からすべて探して配列にして返してきます。

したがって最初に見つけたもののvalueを取得すれば目的のものが手に入るとわかります。

const title = document.getElementsByName('title')[0].value;
const text = document.getElementsByName('text')[0].value;

Comments

[Quad]

試したら上手くいきました。
ありがとうございます