Question

这是一个纯粹的JavaScript问题，请不要jQuery。

尝试制作JavaScript Dartboard记分员。遇到打印增量列表的问题。当你单击飞镖靶的一部分时想要计算抛出1,2和3.问题是我想以增量列表格式打印这些抛出。

HTML：

<button class="score-section" data-value="20" data-multiplier="1">20</button>

<ul id="dartTotals">
  <li>Throw 1: {total}</li>
  <li>Throw 2: {total}</li>
  <li>Throw 3: {total}</li>
</ul>

的JavaScript

document.body.onclick = function(e){
  e = e.target;
  if (e.className && e.className.indexOf('score-section') != -1) {
    var i = 0;
      (function increment(){
        document.getElementById('dartTotals').innerHTML += "<li> Throw " + ++i + ": " + " total </li>";
    }());
  }
}

我唯一可以做的就是在i中添加1，然后继续打印，不增加i。或者运行for循环并打印列表，但它一次完成3个。有人可以协助帮助展示如何通过每次点击制作这个增量列表吗？提前致谢。

JSFIDDLE

更新

Updated Fiddle

在身体上单击该功能正在重置。将var i，现在称为dartThrow移出功能范围，并按预期工作。

var dartThrow = 0;
document.body.onclick = function(e) {
  e = e.target;
  if (e.className && e.className.indexOf('score-section') != -1) {

    (function increment() {
      document.getElementById('dartTotals').innerHTML += "<li> Throw " + ++dartThrow + ": " + " total </li>";
    }());
  }
}

Answer 1

您在每次点击时将$ i设置为0，然后递增该值。只需在函数范围之外执行一个变量，然后每次使用您已经拥有的代码进行正确递增。当$ i达到你想要的总投掷数时，你只需要重置。

打印增量列表项Javascript

1 个答案: