Question

Here是链接我设法让我的按钮像我想要的那样工作，每次点击时“点数”增加50点，每次“点数”达到另外500点时，“等级”增加1。

如果我将其用作待办事项列表，我怎么能继续添加按钮，如已经编码的按钮，但是动态地添加按钮。而不是将按钮编码到HTML中，我更喜欢能够添加更多按钮，以及我选择的标题（文本输入？）。我希望他们的风格都相似。（我正在使用bootstrap CSS）。

如果可能，我可以选择每个按钮给出的分数。

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

另外，如何将'Points'和'Levels'以及所有创建的按钮发送到文本文件，这样当我刷新页面时，什么都没有改变？再次感谢你。

以上是上面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>");
});

按＆＃39;添加任务＆＃39;按钮将为您添加一个新的任务按钮..

Answer 2

var blockNextFilter = true;

$("#myFilter").keyup(function(e){
  // respond to enter key only
  if (e.keyCode == 13)
  {
    blockNextFilter = false;

    // trigger a change event to force the filter code to trigger
    $("#myFilter").change();
  }
});

$("ul").on("filterablebeforefilter", function( e, data ) {
  // disable auto-filtering
  if (blockNextFilter) {
    e.preventDefault();
  }
  // except when we're told so
  else {
    blockNextFilter = true;
  }
});

Answer 3

您可以为新按钮提供与其他按钮相同的类。

var newBtn = document.createElement('button');
newBtn.className = 'btn';

要添加单击侦听器，您可以在附加它们之前附加它们：

newBtn.addEventListener('click', function() {
    addToResult(this.getAttribute('data-points'));
});

我已经为名为data-points的按钮添加了一个属性，该按钮存储了点击该按钮所给出的点数。这种方式比从兄弟跨度中获取它更合适，但跨度更像是向用户展示。

已编辑的代码：

var addBtn = document.getElementById('addBtn');
addBtn.addEventListener('click', function() {
    var container = document.getElementById('container');
    var btnName = document.getElementById('btnName').value;
    var btnPoints = parseInt(document.getElementById('btnPoints').value);
    if(!btnName)
        btnName = "Button ?";
    if(!btnPoints)
        btnPoints = 50;
    var newBtn = document.createElement('button');
    var newPnt = document.createElement('span');
    newBtn.className = 'btn';
    newBtn.innerText = btnName;
    newBtn.setAttribute('data-points', btnPoints);
    newBtn.addEventListener('click', function() {
        addToResult(this.getAttribute('data-points'));
    });
    newPnt.className = 'label';
    newPnt.innerText = "+" + btnPoints;
    container.appendChild(newBtn);
    container.appendChild(newPnt);
});

Updated jsfiddle DEMO

编辑2：

要删除您使用的元素：element.parentNode.removeChild(element)。因此，为了将其置于上下文中，您还需要删除相关的跨度：

newBtn.addEventListener('click', function() {
    addToResult(this.getAttribute('data-points'));
    this.parentNode.removeChild(this.nextElementSibling);
    this.parentNode.removeChild(this);
});

编辑#N：

使用localStorage非常简单。要保存结果：

var result = document.getElementById('result').innerText;
localStorage.setItem("whateverName", result);

无论什么时候想要取回它：

localStorage.getItem("whateverName");

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

3 个答案: