Hello im really new to JavaScript just started learning two weeks ago and ive taken on a personal project to help try and grow my knowledge but ive kinda reached the end of my rope on what ive been able to do.
(您好，JavaScript的真正新手是在两周前才开始学习的，并且ive进行了一个个人项目来帮助尝试增进我的知识，但是ive有点使我无法完成ive的工作。)
the html is quite simple
(html很简单)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Finance Tracker</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<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>
<tbody>
</tbody>
</table>
</section>
<script src="js/main.js"></script>
</body>
</html>
the outputs for were the transactions are added appears on the tbody section under either the class credit or debit depending on which you select from the drop down.
(根据您从下拉菜单中选择的内容，添加交易的输出将显示在“类别”信贷或借项下的“正文”部分中。)
ive gotten it to were i can get the product name and card type and amount to show alone with a functioning delete icon but i cant seem to figure out how to calculate individual totals for both only the credit and only the debit entry's and for if a entry is deleted for that sum to be subtracted from the total.(香港专业教育学院得到它是我可以得到产品名称，卡类型和金额显示一个功能正常的删除图标，但我似乎无法弄清楚如何只计算贷方和借方分录的单个总计删除该条目，以便从总数中减去该总和。)
for the popup confirm/deny deletion of entry popup im not even sure were to start on that one.(对于弹出式确认/拒绝删除条目弹出式即时消息，我什至不确定要在该弹出式菜单上启动。)
Heres a image showing what i want to do with the separate totals(这是一张图片，显示我要对单独的总计进行的操作)
heres my js
(这是我的js)
window.addEventListener('load', function(e) {
const addTransForm = document.querySelector("form");
const tableBody = document.querySelector("tbody");
const removeIcon = `<img src="img/remove.svg" data-index>`;
addTransForm.addEventListener("submit", function(e) {
e.preventDefault();
const validateItem = validateTrans(e.target);
if (validateItem.valid) {
const htmlString = createTrans(validateItem);
addTrans(htmlString);
}
});
function addTrans(htmlString) {
const makeIndex = tableBody.children.length;
let makeNodeFromText = document
.createRange()
.createContextualFragment(htmlString);
let row = makeNodeFromText.querySelector("tr");
let image = row.querySelector("img");
image.dataset.index = makeIndex;
tableBody.appendChild(row);
addListenerToImage(image);
updateTotalTime()
}
function updateTotalTime(){
console.log("shit")
}
function addListenerToImage(image) {
image.addEventListener("click", removeTrans);
}
function removeTrans(e){
let trans = tableBody.querySelectorAll("tr");
const index = e.target.dataset.index;
const nodeToRemove = trans[index];
tableBody.removeChild(nodeToRemove);
trans = tableBody.querySelectorAll("tr");
trans.forEach((item, index) => {
console.log((item.querySelector("img").dataset.index = index));
});
}
function createTrans(newTrans) {
const transElement =
`
<table>
<tr>
<td class="description">${newTrans.description}</td>
<td class="payment-type">${newTrans.type}</td>
<td class="currency">${newTrans.currency}</td>
<td class="remove"> ${removeIcon} </td>
</tr>
</table>
`;
return transElement;
}
function validateTrans(theForm) {
const transItem = {};
let errorCount = 0;
if (theForm.elements.description.value.trim() !== "") {
transItem.description = theForm.elements.description.value;
}
if (theForm.elements.type.value.trim() !== "") {
transItem.type = theForm.elements.type.value;
}
if (theForm.elements.currency.value !== 0) {
transItem.currency = parseFloat(theForm.elements.currency.value).toFixed(2);
}
if (errorCount === 0) {
transItem.valid = true;
return transItem;
}
}
})
thanks for help in advance im kinda at the end of my knowledge bank
(提前感谢您的帮助，在我的知识库尽头)
ask by bill the noob translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
