<input type="number">に入力した数値をリアルタイムで計算したいがNaNが出てしまう。

Question

前提

inputに数値を入力するとリアルタイムに計算結果（足し算）が反映される仕組みを作りたいと思っています。
JavaScriptを書いてみたのですが、inputに数値を入力すると計算結果がNaNとなってしまいます。

実現したいこと

inputに数値を入力すると

<td id="sum-p1"></td>

にリアルタイムで計算結果（足し算）を出す

該当のソースコード

<table>
    <tbody id="score">
        <tr>
            <th>1</th>
            <td class="score-p1"><input type="number"></td>
        </tr>
        <tr>
            <th>2</th>
            <td class="score-p1"><input type="number"></td>
        </tr>
        <tr>
            <th>3</th>
            <td class="score-p1"><input type="number"></td>
        </tr>
        <tr>
            <th>4</th>
            <td class="score-p1"><input type="number"></td>
        </tr>
        <tr>
            <th>5</th>
            <td class="score-p1"><input type="number"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>合計</th>
            <td id="sum-p1"></td>
        </tr>
    </tfoot>
</table>

window.onload = function(){
// 要素を取得
const score = document.getElementById('score');
const scoreElements = score.querySelectorAll('.score-p1 input');
var price = 0;

// 取得した要素を反復処理
for (let i = 0; i < scoreElements.length; i += 1) {
	const element = scoreElements[i];
    price += parseInt(element.textContent);
}

score.addEventListener('keyup', () => {
    document.getElementById('sum-p1').innerText = price;
});
}

なぜNaNになるのか分からず。。
どうぞよろしくお願いいたします。

Answer 1

window.addEventListener('DOMContentLoaded', ()=>{
  score.addEventListener('input', () => {
    const sum=[...document.querySelectorAll('.score-p1 input')].reduce((x,y)=>x+Number(y.value),0);
    document.querySelector('#sum-p1').textContent=sum;
  });
});

ポイント：
parseIntは数値以外の値を評価するとNaNを返します、最初値が空のinputがあるのでそこで引っかかります。
inputの値はtextContentでは拾えません。valueを参照ください

Comments

[syun1988]

早速のご回答ありがとうございます！
textcontentは拾えないんですね。
勉強になりました。

Answer 2

    price += parseInt(element.textContent);

<input> から値を取り出すには、textContent ではなく value や valueAsNumber を使います。

    // 値が空だとNaNになるのでやはりチェックする必要はある
    if (!isNaN(element.valueAsNumber))
      price += element.valueAsNumber;

Comments

[syun1988]

早速のご回答ありがとうございます！
勉強になりました。