在按钮上单击js添加项目到列表

Posted 2021-05-06

添加了文本字段“inputw1”和“inputw2”的值。单击按钮后，应生成表单列表：“a - > b cd - > w ...”未捕获TypeError：无法读取null的属性'appendChild'

function pushRules(list){
        var rules = "";

        var w1 = document.getElementById('inputw1').value;
        var w2 = document.getElementById('inputw2').value;
        var w = w1+'-->'+w2;
        for(var i=0; i<w.length; i++){
            rules+=w[i].value;
        }
    var li = document.createElement("li");
    var rule = document.createTextNode(rules);
    li.appendChild(rule);
    document.getElementById("list").appendChild(li);
}

<form>
        <label>w1:</label><input id="inputw1" type="text"><label> --> w2:</label><input id="inputw2" type="text">
        <input type="button" value="add rule" onclick="pushRules()">
    </form>

答案

function pushRules(list){
    var rules = "";

    var w1 = document.getElementById('inputw1').value;
    var w2 = document.getElementById('inputw2').value;
    var w = w1+'-->'+w2;
    var li = document.createElement("li");
    var rule = document.createTextNode(w);
    li.appendChild(rule);

    var removeBtn = document.createElement("input");
    removeBtn.type = "button";
    removeBtn.value = "Remove";
    removeBtn.onclick = remove;
    li.appendChild(removeBtn);
    document.getElementById("list").appendChild(li);
}

function remove(e) {
  var el = e.target;
  el.parentNode.remove();
}

<form>
    <label>w1:</label><input id="inputw1" type="text">
    <label> --> w2:</label><input id="inputw2" type="text">
    <ul id="list"></ul>
    <input type="button" value="add rule" onclick="pushRules()">
    </form>

另一答案

您的html中没有list ID的元素 - 添加它。

function pushRules(list){
    var w1 = document.getElementById('inputw1').value;
    var w2 = document.getElementById('inputw2').value;
    var li = document.createElement("li");
    document.getElementById("list").appendChild(li).textContent = w1 + '-->' + w2;
}

<form>
<label>w1:</label><input id="inputw1" type="text"><label> --> w2:</label><input id="inputw2" type="text">
<input type="button" value="add rule" onclick="pushRules()">
</form>
<ul id="list"></ul>

另一答案

未捕获的TypeError：无法读取null的属性'appendChild'

当你的脚本运行时，你试图找到的元素不在DOM中。

你的DOM-reliant剧本的位置会对其行为产生深远的影响。浏览器从上到下解析HTML文档。元素被添加到DOM中，脚本（通常）在遇到它们时执行。这意味着订单很重要。通常，脚本无法找到稍后出现在标记中的元素，因为这些元素尚未添加到DOM中。

见演示

function pushRules() {

  var w1 = document.getElementById('inputw1').value;
  var w2 = document.getElementById('inputw2').value;
  
  var li = document.createElement("li");
  li.innerText = w1 + '-->' + w2;
  
  document.getElementById("list").appendChild(li);
}

<form>
  <label>w1:</label><input id="inputw1" type="text"><label> --> w2:</label><input id="inputw2" type="text">
  <input type="button" value="add rule" onclick="pushRules()">
</form>

<ui id="list"></ui>

以上是关于在按钮上单击js添加项目到列表的主要内容，如果未能解决你的问题，请参考以下文章

如何通过单击适配器类中代码的项目中的删除按钮来删除列表视图中的项目后重新加载片段？

在通知单击时将项目添加到片段内的 recyclerview

一旦单击带有 in 片段的回收器列表项，如何将片段意向活动，以及如何获取回收器项目值？

片段未在后退按钮上打开上一个片段

如何从列表视图按钮单击将多个数据添加到数组列表？

将多个项目添加到列表视图，每个项目从按钮单击的另一个意图接收