Question

我试图弄清楚如何使用Javascript对象跟踪多个添加和删除计数器，并使用对象中的数据更新DOM。

我的HTML：

<div id="first-counter-box">
    <div id="first-number">0</div>
    <div id="first-add" onclick="add(first)"></div>
    <div id="first-minus" onclick="minus(first)"></div>
</div>

<div id="second-counter-box">
    <div id="second-number">0</div>
    <div id="second-add" onclick="add(second)"></div>
    <div id="second-minus" onclick="minus(second)"></div>
</div>

我的Javascript：

var dataObject = {
    firstCounter = 0;
    secondCounter = 0;
}

function add(counterId) {
    if (counterId==first) {
      dataObject.firstCounter++;
      var firstNumber = document.getElementbyID("first-number");
      firstNumber.innerHTML(dataObject.firstCounter);
    }
    else (counterId==second) {
        dataObject.secondCounter++;
        var secondNumber = document.getElementbyID("second-number");
        secondNumber.innerHTML(dataObject.secondCounter);
    }

}

function remove(counterId) {
    if (counterId==first) {
        dataObject.firstCounter--;
        var firstNumber = document.getElementbyID("first-number");
        firstNumber.innerHTML(dataObject.firstCounter);
    }
    else (counterId==second) {
        dataObject.secondCounter--;
        var secondNumber = document.getElementbyID("second-number");
        secondNumber.innerHTML(dataObject.secondCounter);
    }
}

我的目标是使用add（）和remove（）函数更新dataObject中的数据，并使用更新的信息更新DOM。

我确信有更好的方法来解决这个问题，而不是我的粗略的javascript。谢谢！

Answer 1

以Kolink的评论为基础，但为了提高效率，这里有一些真正的帮助：

<div id="first-counter-box">
    <div id="first-number">0</div>
    <div id="first-add" onclick="add('first')"></div> <-- first is a string -->
    <div id="first-minus" onclick="minus('first')"></div> <-- first is a string -->
</div>

<div id="second-counter-box">
    <div id="second-number">0</div>
    <div id="second-add" onclick="add('second')"></div> <-- second is a string -->
    <div id="second-minus" onclick="minus('second')"></div> <-- second is a string -->
</div>

和js：

var dataObject = { // correct object instantiation
    firstCounter: 0,
    secondCounter: 0
}

function add(counterId) {
    if (counterId=='first') { // first is a string
      dataObject.firstCounter++;
      var firstNumber = document.getElementById("first-number"); // correct capitalization
      firstNumber.innerHTML = dataObject.firstCounter; // property, not method
    }
    else (counterId=='second') { // second is a string
        dataObject.secondCounter++;
        var secondNumber = document.getElementById("second-number"); // correct capitalization
        secondNumber.innerHTML = dataObject.secondCounter; // property, not method
    }

}

function remove(counterId) {
    if (counterId=='first') { // first is a string
        dataObject.firstCounter--;
        var firstNumber = document.getElementById("first-number"); // correct capitalization
        firstNumber.innerHTML = dataObject.firstCounter; // property, not method
    }
    else (counterId=='second') { // second is a string
        dataObject.secondCounter--;
        var secondNumber = document.getElementById("second-number"); // correct capitalization
        secondNumber.innerHTML = dataObject.secondCounter; // property, not method
    }
}

这是一个更有效的重写：

var dataObject = { // keys match the counters
    'first': 0,
    'second': 0
};

var divRefs = {
    'first': document.getElementById("first-number"),
    'second': document.getElementById("second-number")
};

function add(counterId) {
    dataObject[counterId]++;
    divRefs[counterId].innerHTML = dataObject[counterId];
}

function remove(counterId) {
    dataObject[counterId]--;
    divRefs[counterId].innerHTML = dataObject[counterId];
}

如何使用Javascript在DOM中添加和减去数字？

1 个答案: