【发布时间】：2020-03-07 13:04:42
【问题描述】：
我正在学习 JavaScript，目前正在一个网站项目中制作预算应用程序。我已经完成了一半，但那时我遇到了一个问题。我无法将列表的描述值设置为输入字段。这是什么列表：这包含诸如收入或支出之类的东西（描述和价值）。 The List and the App i'm making。现在，我实现了当我按 Enter 键或单击 ✅ 时将项目添加到列表中的功能，当我给它指定类型（+ 或 -）并输入描述和值时。它将项目添加到列表中，但不会更改描述输入字段中写入的描述。控制台中没有错误。 See whats happening in my Application。救命！
Javascript 文件：
// *****Budget Controller*****
var budgetController = (function() {
var expense = function (id, description, value) {
this.id = id;
this.description = description;
this.value = value;
};
var income = function (id, description, value) {
this.id = id;
this.description = description;
this.value = value;
};
var data = {
allItems: {
exp: [],
inc: []
},
totals: {
exp: 0,
inc: 0,
}
};
return {
addItem: function (type, des, val) {
var newItem, ID;
// Create new ID
if (data.allItems[type].length > 0) {
ID = data.allItems[type][data.allItems[type].length -
1].id + 1;
} else {
ID = 0;
}
// Create new item based on 'inc' or 'exp' type
if (type === 'exp') {
newItem = new expense(ID, des, val);
} else if (type === 'inc') {
newItem = new income(ID, des, val);
}
// Push it into our data structure
data.allItems[type].push(newItem);
// Return the new element
return newItem;
},
testing: function() {
console.log(data);
}
};
}) ();
// *****UI Controller*****
var UIController = (function () {
var DOMStrings = {
inputType: '.add__type',
inputDescription: '.add__description',
inputValue: '.add__value',
inputBtn: '.add__btn',
incomeContainer: '.income__list',
expenseContainer: '.expenses__list'
};
return {
getInput: function() {
return {
type:
document.querySelector(DOMStrings.inputType).value,
description:
document.querySelector(DOMStrings.inputDescription).value,
value:
document.querySelector(DOMStrings.inputValue).value
};
},
addListItem (obj, type) {
var html, newHtml, element;
// Create HTML string with placeholder text
if (type === 'inc') {
element = DOMStrings.incomeContainer;
html = '<div class="item clearfix" id="income-%id%">
<div class="item__description">%description%</div><div class="right
clearfix"><div class="item__value">%value%</div><div
class="item__delete"><button class="item__delete--btn"><i
class="ion-ios-close-outline"></i></button></div></div></div>';
} else if (type === 'exp') {
element = DOMStrings.expenseContainer;
html = '<div class="item clearfix" id="expense-%id%">
<div class="item__description">%description%</div><div class="right
clearfix"><div class="item__value">%value%</div><div
class="item__delete"><button class="item__delete--btn"><i
class="ion-ios-close-outline"></i></button></div></div></div>';
}
// Replace the placeholder text with some actual data
newHtml = html.replace('%id%', obj.id);
newHtml = html.replace('%description%', obj.description);
newHtml = html.replace('%value%', obj.value);
// Insert the HTML into the DOM
document.querySelector(element).insertAdjacentHTML('beforeend',
newHtml);
},
getDOMstrings: function () {
return DOMStrings;
}
};
}) ();
// *****App Controller*****
var controller = (function (budgetCtrl, UICtrl) {
var setupEventListeners = function () {
var DOM = UICtrl.getDOMstrings();
document.querySelector(DOM.inputBtn).addEventListener('click',
ctrlAddItem);
document.addEventListener('keypress', function(event) {
if (event.keyCode === 13 || event.which === 13) {
ctrlAddItem();
}
});
}
var ctrlAddItem = function () {
var input, newItem;
// Get the Field input data
input = UICtrl.getInput();
// Add the item to the Budget Controller
newItem = budgetCtrl.addItem(input.type, input.description,
input.value);
// Add the item to the UI
UICtrl.addListItem(newItem, input.type);
// Calculate the Budget
// Display the Budget on the UI
};
return {
init: function() {
console.log("Application has started");
setupEventListeners();
}
}
}) (budgetController, UIController);
controller.init();
HTML 文件：
<body>
<div class="top">
<div class="budget">
<div class="budget__title">
Available Budget in <span class="budget__title--month">%Month%</span>:
</div>
<div class="budget__value">+ 2,345.64</div>
<div class="budget__income clearfix">
<div class="budget__income--text">Income</div>
<div class="right">
<div class="budget__income--value">+ 4,300.00</div>
<div class="budget__income--percentage"> </div>
</div>
</div>
<div class="budget__expenses clearfix">
<div class="budget__expenses--text">Expenses</div>
<div class="right clearfix">
<div class="budget__expenses--value">- 1,954.36</div>
<div class="budget__expenses--percentage">45%</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="add">
<div class="add__container">
<select class="add__type">
<option value="inc" selected>+</option>
<option value="exp">-</option>
</select>
<input type="text" class="add__description" placeholder="Add description">
<input type="number" class="add__value" placeholder="Value">
<button class="add__btn"><i class="ion-ios-checkmark-outline"></i></button>
</div>
</div>
<div class="container clearfix">
<div class="income">
<h2 class="icome__title">Income</h2>
<div class="income__list">
<!--
<div class="item clearfix" id="income-0">
<div class="item__description">Salary</div>
<div class="right clearfix">
<div class="item__value">+ 2,100.00</div>
<div class="item__delete">
<button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
</div>
</div>
</div>
<div class="item clearfix" id="income-1">
<div class="item__description">Sold car</div>
<div class="right clearfix">
<div class="item__value">+ 1,500.00</div>
<div class="item__delete">
<button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
</div>
</div>
</div>
-->
</div>
</div>
<div class="expenses">
<h2 class="expenses__title">Expenses</h2>
<div class="expenses__list">
<!--
<div class="item clearfix" id="expense-0">
<div class="item__description">Apartment rent</div>
<div class="right clearfix">
<div class="item__value">- 900.00</div>
<div class="item__percentage">21%</div>
<div class="item__delete">
<button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
</div>
</div>
</div>
<div class="item clearfix" id="expense-1">
<div class="item__description">Grocery shopping</div>
<div class="right clearfix">
<div class="item__value">- 435.28</div>
<div class="item__percentage">10%</div>
<div class="item__delete">
<button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
</div>
</div>
</div>
-->
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
【问题讨论】：
标签： javascript replace input-field