データベースから引っ張った値に対してフォームの入力値を計算させる方法

いつもお世話になっております。

<h4>商品リストの中にデータベースから取得した商品の価格の一覧が入ってきます。この価格に対してformにあるinputの値をかけた値を計算用のtdに入れたいのですが値が空となってしまいます。

itemsの変数に入っているオブジェクトから値を取り出す書き方が間違っているのかなと思っているのですが、お力沿えを頂けませんでしょうか。。

よろしくお願い致します。

HTML
1<html>
2    <body>
3        <form action="#" name="form01">
4            <label for="point">point</label>
5            <input type="number" id="point" name="point" value=1 required onChange="calculate()">
6        </form>
7
8        <h4>商品リスト</h4>
9        {% for product in products %}
10            <div class="items">
11                <div>
12                    <a></a>
13                </div>
14                <div style="display:flex;">
15                    <table class=>
16                        <tr>
17                            <th>価格</th>
18                            <td class="price">{{ product.価格 }}</td>
19                        </tr>
20                        <tr class="calc">
21                            <th>計算用</th>
22                            <td></td>
23                        </tr>
24                    </table>
25                </div>
26            </div>
27        {% endfor %}
28
29        
30        <script type="text/javascript">
31        <!--
32        function calculate(){
33                const price01 = Number(document.form01.point.value);
34                const items = document.getElementsByClassName('items');
35
36                for (let i=0; i<items.length; i++){
37　　　　　　　　　   document.querySelector('.calc > td').value = items[i].querySelector('.price').value * price01;
38                }
39
40            }
41        //->
42        </script>
43    </boby>
44</html>