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

【问题标题】：How to add and subtract numbers in the DOM with Javascript?如何使用 Javascript 在 DOM 中添加和减去数字？
【发布时间】：2013-07-08 17:31:46
【问题描述】：

我试图弄清楚如何使用 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 更好的方法来解决这个问题。谢谢！

【问题讨论】：

马上你的对象定义是完全错误的......然后getElementById的大小写不正确......然后innerHTML是一个属性，而不是一个方法。而且您从不定义first 和second（它们应该是字符串吗？）总而言之，它不起作用有什么神秘之处吗？
嗨，我知道你是新来的。如果您认为某个答案解决了问题，请单击绿色复选标记将其标记为“已接受”。这有助于将注意力集中在仍然没有答案的旧 SO。

标签： javascript html arrays dom math

【解决方案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];
}

【讨论】：

感谢您的帮助！我尝试了上面的代码，它成功更新了 dataObject，但是由于某种原因，它没有通过 innerHTML 更新 DOM ...
getElementById 仍然大写错误。 b 需要大写 B。
就是这样。谢谢大家！