问题描述
我似乎在努力让这个“财务跟踪器”发挥作用。它应该将一个班级的所有价值 ($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 的结果以小数位显示/自我复制。
解决方法
必须用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 访问迭代中的当前项目。