javascript - 如何使用 JavaScript 动态地将工作按钮添加到我的增量奖励系统中？

Question

Here是链接我设法让我的按钮按照我想要的方式工作，每次点击都会将“点”数量增加 50，每次“点”达到另外 500 点时，“等级”就会增加 1。

如果我将其用作待办事项列表，我如何才能不断添加按钮，就像已经编码的按钮一样，但是是动态的。我更希望能够添加更多按钮，并使用我选择的标题(文本输入？)，而不是将按钮编码到 HTML 中。我希望他们的风格都相似。 (我正在使用 Bootstrap CSS)。

如果可以的话，我可以选择每个按钮给出多少分。

我完全不知道如何做到这一点，有人可以帮我吗？先感谢您。

另外，如何将“点数”和“级别”以及所有创建的按钮发送到文本文件，以便在刷新页面时没有任何更改？再次感谢您。

这里是上面 JSbin 链接中使用的相同代码。

HTML

<center>
  <h2>Reward System</h2>
  </br>
<div class='well' style="width:400px;">
<input type='button' value='Task 1' onClick='add()' class='btn btn-danger'> 
<span class="label label-default">+50</span>
</div>

<div class='well' style="width:400px;">

<input type='button' value='Task 2' onClick='add()' class='btn btn-danger'>
<span class="label label-default">+50</span>
</div>

<div class='well' style="width:400px;">

<input type='button' value='Task 3' onClick='add()' class='btn btn-danger'>
<span class="label label-default">+50</span>
</div>

<div class='well' style="width:400px;">

<input type='button' value='Task 4' onClick='add()' class='btn btn-danger'>
<span class="label label-default">+50</span>
</div>


</br></br>

<hr style="width:400px;">


<div>
  <h3>Points </h3>
  <p id='p'>0</p>
</div>

<hr style="width:400px;">

<div  style="width:400px;">
  <h3>Level 
  <p id='lvl'>0</p>

</div>

<hr style="width:400px;">

</center>

Javascript

var i = 0;
var lvl = 0;
var a = 100;

function add() {
   i+=50;
  document.getElementById('p').innerHTML = i;
var perc = ' "' + ' "px';
var para = document.getElementById("p");
para.style.fontSize = perc;

  while (i > 5*a) {
    lvl+=1;
    a+=100;
}

  document.getElementById('lvl').innerHTML = lvl;
  var perc1= ' "' + ' "px';
var para1= document.getElementById("lvl");
  para1style.fontSize = perc1;

}

Answer 1

关于文件部分，可以将数据保存在浏览器localStorage中，而不是写入文件

保存一些东西:

localStorage.setItem("param1",param1Value);

获取它(再次加载页面后，加载时):

var param1Value = localStorage.getItem("param1");

关于添加任务，我添加了fiddle example但它使用 jQuery(非常推荐您完成任务..)希望有帮助

<div><button id="addTaskButton" class="btn">Add Task</button></div>


$("#addTaskButton").click(function (event) {
    var nextNumber = $(".well").length + 1;
    $($("hr")[0]).before("<div class='well' style='width:400px;'><input type='button' value='Task " + nextNumber + "' onClick='add()' class='btn btn-danger'> <span class='label label-default'>+50</span></div>");
});

按“添加任务”按钮将为您添加一个新任务按钮。