JavaScriptのtextContentの挙動について

Question

textContentを使ってテキストボックスに入力した値をそのまま出力したいのですがうまくいきません

let date = document.getElementById("date");
    let kingaku = document.getElementById("kingaku");
    let syousai = document.getElementById("syousai");
    let bikou = document.getElementById("bikou");
    let inputDate = document.getElementById("inputDate");

    function test() {
        const li = document.createElement('li');
        li.textContent = `${date}
		    ${kingaku}
		    ${syousai}
		    ${bikou}`;
        inputDate.append(li);
    }

    btn.addEventListener('click', () => {
        test();
    })

body>
    <td><input type="text" name="date" id="date"></td>

    <td><input type="text" name="kingaku" id="kingaku"></td>
    <td><input type="text" name="syousai" id="syousai"></td>
    <td><input type="text" name="bikou" id="bikou"></td>
    <button id="btn">ボタン</button>
    <ul id="inputDate"></ul>
    <script src="js/main.js"></script>
</body>

Answer 1

inputの値をとるには、valueプロパティを使ってください。
document.getElementByIdでとった値（DOM）をそのまま表示すると、添付していただいたような文字列が表示されてしまいます。

let date = document.getElementById("date");
let kingaku = document.getElementById("kingaku");
let syousai = document.getElementById("syousai");
let bikou = document.getElementById("bikou");
let inputDate = document.getElementById("inputDate");

function test() {
  const li = document.createElement("li");
  li.textContent = `${date.value}
            ${kingaku.value}
            ${syousai.value}
            ${bikou.value}`;
  inputDate.append(li);
}

btn.addEventListener("click", () => {
  test();
});

サンプルコード

参考リンク

• https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/text
• https://qiita.com/takeshisakuma/items/f1ae123457bc99f23f7d#input-typetext

Comments

[miyabi_pudding]

ネイティブでは、
inputのvalueはメソッドなのでしょうか・・・？
jQueryだと、間違いなくメソッドですが。

[shgtkshruch]

コメントありがとうございます。
最初に書き違えていたことに気づいて、先程修正しました。

[miyabi_pudding]

https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement

やはりプロパティのようですね。
input要素のvalue属性に値が入る挙動を実現するために、内部的にセッターメソッドになっている可能性は否めませんが。

[miyabi_pudding]

修正ありがとうございます！

[shgtkshruch]

こちらこそ、ご指摘ありがとうございました！

Answer 2

JavaScriptのtextContentの挙動について

Node.textContent で説明されています。

textContentを使って（中略）うまくいきません

<Input> 要素 は 空要素なので、textContentによる値の取得はできません。

テキストボックスに入力した値をそのまま出力したい

既に回答が出ています。

Answer 3

const sample = document.getElementById("kingaku")
console.log(sample)

だと要素の配列が表示になってしまうので、

const sample = document.getElementById("kingaku")
console.dir(sample.name) // name属性の場合
console.dir(sample.id) //id名の場合

のような感じに修正していただければ適応すると思います。

大まかな変更の仕方だと以下のような感じになります。

const date = document.getElementById("date"); // dateなどの要素
const li = document.createElement('li'); // 追加する要素
li.textContent = `${date.name}` // li要素にテキスト追加など
inputDate.append(li);