Javascript 添加和删除列表淘汰

我想做一个可以加减数值的计算器。同时，我希望用户能够添加和删除列表。“我的添加和删除列表”按钮不起作用。有人能帮我吗

以下是我的javascript代码：

var ViewModel = function() {
 var self = this;

self.value1 = ko.observable(0),
self.value2 = ko.observable(0),
self.mathOperator = ko.observableArray(['+', '-']);
self.selectedOperator = ko.observableArray(['+']);

self.calculateValues = ko.computed(function(){
    var selectedOperator = self.selectedOperator()[0],
        value1 = self.value1(),
        value2 = self.value2();

    switch(selectedOperator[0]){
        case '+': 
            return parseInt(value1) + parseInt(value2);
        case '-':
            return parseInt(value1) - parseInt(value2);
    }
});

self.addValue = funtion() {
    self.selectedOperator.push(self.selectedOperator()[0]);
}

self.removeValue = function(val) {
    self.selectedOperator.remove(val)
}
}

ko.applyBindings(new ViewModel());

 <div id="MyCalc">
<table>
    <tbody data-bind="foreach: selectedOperator">
        <tr>
            <td>
                <label>Value1</label>
                <input type="text" data-bind="value: value1" />
            </td>
            <td>
                <select data-bind="options: mathOperator, selectedOptions: selectedOperator,"></select>
            </td>
            <td>
                <button data-bind="click: removeValue">Remove</button>
            </td>
        </tr>
        <tr>
            <td>
                <label>Value2</label>
                <input type="text" data-bind="value: value2" />
            </td>
            <td>
                <select data-bind="options: mathOperator, selectedOptions: selectedOperator,"></select>
            </td>
            <td>
                <button data-bind="click: removeValue">Remove</button>
            </td>
        </tr>
        <button data-bind="click:addvalue">Add Another Value</button>
    </tbody>
</table>
<div id="result">Total:<span data-bind="text: calculateValues" />
</div>

这是我的html代码：

var ViewModel = function() {
 var self = this;

self.value1 = ko.observable(0),
self.value2 = ko.observable(0),
self.mathOperator = ko.observableArray(['+', '-']);
self.selectedOperator = ko.observableArray(['+']);

self.calculateValues = ko.computed(function(){
    var selectedOperator = self.selectedOperator()[0],
        value1 = self.value1(),
        value2 = self.value2();

    switch(selectedOperator[0]){
        case '+': 
            return parseInt(value1) + parseInt(value2);
        case '-':
            return parseInt(value1) - parseInt(value2);
    }
});

self.addValue = funtion() {
    self.selectedOperator.push(self.selectedOperator()[0]);
}

self.removeValue = function(val) {
    self.selectedOperator.remove(val)
}
}

ko.applyBindings(new ViewModel());

 <div id="MyCalc">
<table>
    <tbody data-bind="foreach: selectedOperator">
        <tr>
            <td>
                <label>Value1</label>
                <input type="text" data-bind="value: value1" />
            </td>
            <td>
                <select data-bind="options: mathOperator, selectedOptions: selectedOperator,"></select>
            </td>
            <td>
                <button data-bind="click: removeValue">Remove</button>
            </td>
        </tr>
        <tr>
            <td>
                <label>Value2</label>
                <input type="text" data-bind="value: value2" />
            </td>
            <td>
                <select data-bind="options: mathOperator, selectedOptions: selectedOperator,"></select>
            </td>
            <td>
                <button data-bind="click: removeValue">Remove</button>
            </td>
        </tr>
        <button data-bind="click:addvalue">Add Another Value</button>
    </tbody>
</table>
<div id="result">Total:<span data-bind="text: calculateValues" />
</div>

价值1
去除
价值2
去除
增加另一个价值
总数：

---

或者为了便于查看，这是jFIDLE链接

这段代码有太多问题。首先，在这些行中使用逗号而不是分号：

self.value1=ko.observable（0），self.value2=ko.observable（0），

。在

addValue

中，将

函数

拼写为

函数

。接下来，在HTML中，您尝试在操作符上执行循环：

foreach:selectedOperator

，这毫无意义。我猜您希望对每一行执行

foreach

，这将包括一个值和一个运算符，但您没有可观察的数组来保存此信息。这里有一个稍微好一点的版本：但它仍然有一个问题，即逗号确实有效，但我会在你有它们的地方使用分号。顺便说一句，在开发的每个阶段询问关于同一事物的多个问题实际上是要求我们为你编写代码。也许你可以看看这个：试着从中学习。