テキストボックスに入力した値を取得したい

テキストボックスに値を入れ(初期値は0)ボタンが押されたら値を取得したいです。
ですが、なぜか入力した値が取得できていません。

アドバイス等お願い致します。

HTML
1<form name="form">
2    <div class="container">
3            <button type="button" class="buttons">
4                <span class="costs">家賃<br></span>
5                <input type="text" size="10" maxlength="10" value="0" name="edit" class="edit_cost">円
6                </button>
7                <button type="button" class="buttons">
8                    <span class="costs">通信費<br></span>
9                    <input type="text" size="10" maxlength="10" value="0" name="edit" class="edit_cost">円
10                </button>
11        </div>
12
13        <div class="calc_container">
14            <input type="button" class="calc" value="計算" onclick="EditCost()"></input>
15        </div>
16     </form>

JavaScript
1function EditCost() {
2    const edit_cost = document.querySelectorAll('.edit_cost');
3    console.log(edit_cost);
4    edit_cost.forEach(ec => {
5        ec = document.forms.form.edit.value;
6        console.log(ec);
7    });
8}

行動規範の内容に同意します

回答2件

えっと、なぜforEachで回している1要素のecをec = document.forms.form.edit.value;で上書きしてしまっているのでしょうか。

そんなことをせずに、単にec.valueを取ればいいだけです。

投稿2020/08/31 08:11

maisumakun

総合スコア145930

gyoruo

2020/08/31 08:20

ご回答ありがとうございます。inputを使うのならformが絶対に必要だと思っていました。。。

maisumakun

2020/08/31 08:21

> inputを使うのならformが絶対に必要だと思っていました。。。むしろ、いまどきdocument.formsは使いません。

gyoruo

2020/08/31 08:33

ご返信ありがとうございます！勉強になりました！

行動規範の内容に同意します

ベストアンサー

javascript
1ec = document.forms.form.edit.value;

上記がよく分からないのですが、foeEachで扱っているecからそのままvalueを取得するのではないでしょうか？

javascript
1function EditCost() {
2    const edit_cost = document.querySelectorAll('.edit_cost');
3    console.log(edit_cost);
4    edit_cost.forEach(ec => {
5        //ec = document.forms.form.edit.value;
6        console.log(ec.value);
7    });
8}