javascript - 如何自动添加用户在文本字段中插入的值，然后在 div 上显示总计？

Question

我目前有这个 html 代码:

<a href="#" onclick="addmore()">Add More Field</a>
<div id="addmore">
<ul class="jcform" id="countme">
  <li><input id="name" class="form-control" name="cname[]" type="text" value=""/></li>
  <li><input id="score" class="form-control" name="cscore[]" type="text" value=""/></li>
</ul>
</div>
 Total: <div id="displaytotalscore"></div>

下面是我的 JavaScript:

function removeme(numm) {
 document.getElementById('remove'+numm+'').remove();
}
function addmore() {
  var top_level_div = document.getElementById('addmore');
  var count = top_level_div.getElementsByTagName('ul').length;
  var ul = document.createElement('ul');
  ul.className = 'jcform';
  ul.id = 'remove' + count;
  var tbl1 = '<li><input class="form-control" id="field1" name="cname[]" type="text" 
              value=""/></li>  
              <li><input class="form-control" id="fieldpoints1" name="cpoints[]" 
              type="text" value=""/></li>
             <li><a href="#" class="btn btn-danger" onclick="removeme(' + count + ')">
              Removed</a></li>';
   ul.innerHTML = tbl1;

   document.getElementById('addmore').appendChild(ul)
}

我想要实现的是，当用户在文本字段 id="score"中输入值时，我想在 div id="displaytotalscore"中显示总和。我不知道如何在这里使用 onchange 事件。

好的，这是 jsfiddle 链接 http://jsfiddle.net/41fw2c4x/

Answer 1

document.querySelector("#score").addEventListener("change", function(){
  document.querySelector("#displaytotalscore").textContent = this.value;
}, false);

<a href="#" onclick="addmore()">Add More Field</a>
<ul class="jcform" id="countme">
  <li><input id="name" class="form-control" name="cname[]" type="text" value=""/></li>
  <li><input id="score" class="form-control" name="cscore[]" type="text" value=""/></li>
</ul>

 Total: <div id="displaytotalscore"></div>

这显示了 onchange 事件的基本工作原理。用户使用 id score 在输入中填写分数。当它失去焦点(模糊)时，它将调用 onchange 事件，使用属性 textContent 将分数设置为 div。

用你的 fiddle 更新: http://jsfiddle.net/41fw2c4x/2/

function addmore() {
    var top_level_div = document.getElementById('addmore');
    var count = top_level_div.getElementsByTagName('ul').length;
    var ul = document.createElement('ul');
    ul.className = 'jcform';
    ul.id = 'remove' + count;
    var tbl1 = '<li>Name <input class="form-control" id="field1" name="cname[]" type="text" value=""/></li>  <li>Score <input class="form-control" id="fieldpoints1" name="cpoints[]" type="text" value=""/></li><li><a href="#" class="btn btn-danger" onclick="removeme(' + count + ')">Removed</a></li>';
    ul.innerHTML = tbl1;

    document.getElementById('addmore').appendChild(ul)
}

//my solution
    document.querySelector("#addmore").addEventListener("keyup", function(e){
      if (e.target && e.target.tagName == "INPUT" && e.target.name == "cpoints[]")
      {
          updateScore();
      }
    }, false);

function updateScore()
{
   var score = 0;
   Array.prototype.map.call(document.querySelectorAll("input[name='cpoints[]']"), function(element){
      score += !isNaN(parseInt(element.value)) ? parseInt(element.value) : 0; //when not a digit add 0, or ignore.
   });
   document.querySelector("#displaytotalscore").textContent = score;
          
}

function removeme(numm) {
    document.getElementById('remove' + numm + '').parentElement.removeChild(document.getElementById('remove' + numm + ''));
    updateScore();
}

//solution end

<a href="#" class="btn btn-warning" onclick="addmore()"> Add More Field</a> 
<div id="addmore">
    <ul class="jcform" id="countme">
        <li>Name
            <input id="name" class="form-control" name="cname[]" type="text" value="" />
        </li>
        <li>Score
            <input id="score" class="form-control" name="cpoints[]" type="text" value="" />
        </li>
    </ul>
</div>Total:
<div id="displaytotalscore"></div>

这会向主 div 添加一个 keyup 事件 (addmore)。每次它检测到名为 cpoints[] 的输入元素时，它都会迭代具有该名称的所有输入。将总金额求和并显示在 div 中。它通过分配值 0 来忽略数字以​​外的值。它使用 isNaN 方法检查某物是否为数字。

为什么我切换到 keyup 事件？它允许我只使用一个事件，而不是为每个输入添加一个 onchange 事件。那为什么不在div上设置onchange事件呢？ div 不支持 onchange 事件，因此我们需要不同的方法，在本例中为 keyup。