The values ​​for the text fields "inputw1" and "inputw2" are added. After clicking on the button, a list of the form should be generated: "a-->b cd-->w ..." Uncaught TypeError: Cannot read property 'appendChild' of null

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>

The values ​​for the text fields "inputw1" and "inputw2" are added. After clicking on the button, a list of the form should be generated: "a-->b cd-->w ..." Uncaught TypeError: Cannot read property 'appendChild' of null

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>

• javascript
• list
• input

3 Answers 3

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>

Please try above code snippet.

1. Add the ul element into code.

2. change some javascript code like above code snippet. You don't need for statement in javascript.

Update

I've updated answer as your request so that You can remove element from the list.

I've added some code like below for that.

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

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

You have no element with the ID of list in your HTML - add it in.

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>

You also weren't populating the text content of the li properly.

Uncaught TypeError: Cannot read property 'appendChild' of null

The element you were trying to find wasn’t in the DOM when your script ran.

The position of your DOM-reliant script can have a profound effect upon its behavior. Browsers parse HTML documents from top to bottom. Elements are added to the DOM and scripts are (generally) executed as they're encountered. This means that order matters. Typically, scripts can't find elements which appear later in the markup because those elements have yet to be added to the DOM.

See Demo

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>