从数组中检索数值并添加自身

Question

我似乎很难让这个“财务跟踪器”发挥作用。它应该把一个类的所有价值（0.00 美元以上）加在一起。该列表可以通过创建更多的“.cost”来增加，并添加尽可能多的成本高达 9999 美元的项目。然后它将替换“借方”的值。

我的问题是我不能使用 innerHTML 来获取/检索或替换任何值或直接编辑 html。我尝试从使用 .firstChild 到 .value，转换为全局变量。我觉得我对“appendChild”的理解不够，因为在这种情况下我无法弄清楚如何在不使用 innerHTML 的情况下更改 innerHTML。

这是家庭作业，所以我宁愿有一个描述，而不仅仅是代码，没有什么可解释的，这样我就可以进步和学习！我花了几天时间到处寻找这个问题，但没有什么能完全解决它。我的代码如下：

var purchases = document.querySelector('tbody');
var debit = document.querySelector('.debits');
var credit = document.querySelector('.credits');
var purchCount = 0;
document.querySelector('.frm-transactions').addEventListener('submit', function (evt) {
    let div,
        checkbox,
        label,
        labelText,
        purchText,
        type,
        trash;
        

        labelText = evt.target.elements['description'].value;
        type = evt.target.elements['type'].value.trim();
        amount = evt.target.elements['currency'].value;
        purchCount += 1;

    if (labelText === '') {
        labelText = 'Transaction ' + (purchCount);
    }

    tr = document.createElement('tr');
    td1 = document.createElement('td');
    td2 = document.createElement('td');
    td3 = document.createElement('td');
    td4 = document.createElement('td');
    i = document.createElement('i');
    label = document.createElement('label');

    purchText = document.createTextNode(labelText);
    typeText = document.createTextNode(type);
    cost = document.createTextNode("$" + amount);
    

    label.setAttribute('for', 'todo-' + purchCount);


    tr.appendChild(td1).setAttribute('class', 'weee');
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    td1.appendChild(purchText);
    td2.appendChild(typeText);
    td2.setAttribute('class', type);
    td3.appendChild(cost);
    td3.setAttribute('class', 'cost');
    td4.appendChild(i).setAttribute('class', 'delete fa fa-trash-o');
    tr.appendChild(label);
    purchases.appendChild(tr);

    


    if (td2.classList == "debit") {
        var totalamount = document.querySelector('input[name="currency"]').value;
        var sum = 0;
        for (var i = 0; i < totalamount.length; i++) {
            sum += totalamount;
        }
            console.log(totalamount);
            debit.firstChild.nodeValue += sum;
            console.count(sum);
        
    } else if (td2.classList == "credit") {
        console.log(td2);
    } else {
        console.log('error');
    }


    evt.target.reset();
    evt.preventDefault();
});

生成的 HTML 示例：

<section class="wrapper">
        <h1>Transaction Tracker</h1>
        <form class="frm-transactions">
            <fieldset>
                <legend>Add Transaction</legend>
                <div class="frm-group">
                    <input class="frm-control" type="text" name="description" size="30" placeholder="description" />
                </div>
                <div class="frm-group">
                    <select class="frm-control" name="type">
                        <option value="">type</option>
                        <option value="debit">debit</option>
                        <option value="credit">credit</option>
                    </select>
                </div>
                <div class="frm-group">
                    <i class="edit fa fa-dollar"></i>
                    <input class="frm-control" type="number" name="currency" min="0" max="9999" step="0.01" size="4" placeholder="0.00" />
                </div>
                <div class="frm-group">
                    <input class="frm-control" type="submit" value="add" />
                </div>
                <div class="error"></div>
            </fieldset>
        </form>
        <h2>Transactions</h2>
        <table class="transactions">
            <thead>
                <tr>
                    <td colspan="4" class="right">
                        Total debits: <span class="total debits">$0.00</span>
                        Total credits: <span class="total credits">$0.00</span>
                    </td>
                </tr>
                <tr>
                    <th>Description</th>
                    <th>Type</th>
                    <th class="amount">Amount</th>
                    <th class="tools">Tools</th>
                </tr>
            </thead>
        </table>
    </section>

更新，我现在正试图弄清楚为什么 sum 的结果显示在小数位/重复本身。

Answer 1

你必须用JS来构造DOM吗？

在没有innerHTML() 的情况下获取DOM 元素值的唯一方法是使用element.value。这意味着必须设置元素本身的value="some number"。

如果您必须使用您的代码来生成 HTML，添加一个 HTML 看起来的示例会很好，这样更容易引用而不是从您的代码中解析它。

附带说明，像“ttt”这样的变量名称通常不受欢迎。 尝试使用遵循此结构的正常人类可读名称：myVariableDoesThings。

编辑：对于您的总和问题：

sum += totalamount; 不正确。您正在添加所有元素以与该代码求和。

如果您将循环更改为以下内容，它应该可以工作（不确定如何在没有示例的情况下发布此内容，您也错误地将 .value 添加到查询选择器）：

var totalamount = document.querySelector('input[name="currency"]');
var sum = 0;
totalamount.forEach(element => sum += element.value);

forEach 类似于您的 for 循环，但它将当前正在迭代的项目传递给 lambda 表达式。要保留 for 循环，请使用 totalAmount[i].value 访问迭代中的当前项。