Javascript:如何为列表添加价值并使其即时更新

Javascript: How to add value to a list and make it instant update?

本文关键字：更新 添加 列表 Javascript      更新时间：2023-09-26

我正在尝试创建的函数遇到了这个问题。我希望脚本获取输入字段的值，在逗号上拆分并放入一个数组，该数组将立即显示为复选框列表。

代码如下所示

var names=new Array("Johnny","Brat","Anna");
function makelist(namelist){
    var rest = namelist.split(",");
    names.push.apply(names, rest);
}

然后我希望列表立即以我创建的表单显示

<form method="post">
    <input type="text" name="task" value="buy beer" onClick="this.value=''"/><br/>
    <input type="text" name="names"  onBlur="makelist(this.value)" value="add names seperate by comma" onClick="this.value=''"/><br/>
    <script>
        var i;
        for (i = 0; i < names.length; ++i) {
            document.write("<input type='checkbox' name='navn" + i + "'/>" + names[i] + "<br/>");
        }
    </script>
    <input type="submit" name="submit" value="roll"/>
</form>

它似乎将名称添加到 blur 的数组中，但我无法让它在更新数组时立即显示。

提前致谢

您的主要问题是，for循环在首先加载时只执行一次。当您想在之后更新 DOM 时，您需要一些其他方法。

例如，下面创建一个包含所有新元素的字符串。然后使用 insertAdjacentHTML() 将其插入到包装器<div>中。

.HTML

<form method="post">
 <input type="text" name="task" value="buy beer" onClick="this.value=''"/><br/>
 <input type="text" name="names"  onBlur="makelist(this.value)" value="add names seperate by comma" onClick="this.value=''"/><br/>
 <div id="checkboxes" />
 <input type="submit" name="submit" value="roll"/>
</form>

.JS

var names=new Array("Johnny","Brat","Anna");
function makelist(namelist){
  // insert to array
  var rest = namelist.split(",");
  names.push.apply(names, rest);
  // insert to dom
  var newEls = '';
  for( var i=0; i<rest.length; i++) {
   newEls += "<input type='checkbox' name='navn" + (names.length+i) + "'/>" + rest[i] + "<br/>";
  }
  document.getElementById( 'checkboxes' ).insertAdjacentHTML( 'beforeend', newEls );
}
相关文章：