に入力した数値を計算したいが何を入れても計算結果が0になってしまう。

前提

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

実現したいこと

inputに数値を入力すると

html

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

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

該当のソースコード

html

<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>

javascript

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]; if (!isNaN(element.valueAsNumber)) price += element.valueAsNumber;} score.addEventListener('input', () => { document.getElementById('sum-p1').innerText = price;});}