add item to list on button click js

Question

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>

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

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.

Add the ul element into code.
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();
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 30, 2018 at 18:01

Lead Developer

1,16710 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lead Developer Over a year ago

I have updated my answer as your request so that you can remove the list item. Please upvote and check as right answer if this helpful.

CertainPerformance · Accepted Answer · 2018-03-30 17:58:55Z

0

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.

answered Mar 30, 2018 at 17:58

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Comments

Narendra Jadhav · Accepted Answer · 2018-03-30 18:14:56Z

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>

Collectives™ on Stack Overflow

add item to list on button click js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related