Adding elements to an ordered list on click using jquery

Question

Entering the data in the input field and on clicking the 'Add New' button, element should be added in the list. Here, help me to find out the error

$(document).ready(function() {
  var dataAdd = [];
  $("#addNew").click(function() {
    dataAdd.push($(this).data('#nameList'));
    console.log(data.length);
  });
});

<ol id="nameList">
  <li>aston</li>
  <li>baily</li>
  <li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

The first obvious error in the snippet is that you haven't added jQuery — Rory McCrossan
– Rory McCrossan, Commented Oct 10, 2018 at 8:01

Sergii Vorobei · Accepted Answer · 2018-10-10 08:14:56Z

2

Seems like you need smth like:

$(document).ready(function () {
    $("#addNew").click(function(){
        $("#nameList").append("<li>" + $("#data").val() + "</li>");
    });
});

edited Oct 10, 2018 at 8:14

answered Oct 10, 2018 at 8:03

Sergii Vorobei

1,50713 silver badges19 bronze badges

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

Comments

hetious · Accepted Answer · 2018-10-10 08:05:46Z

1

This works:

  var dataAdd = [];
  $("#addNew").click(function() {
        $('#nameList').append('<li>'+$('#data').val()+'</li>');
  });

answered Oct 10, 2018 at 8:05

hetious

8031 gold badge9 silver badges14 bronze badges

Comments

Marco Dal Zovo · Accepted Answer · 2018-10-10 08:10:08Z

1

I don't understand what are you doing here...

dataAdd.push($(this).data('#nameList'));

You can access DOM elements with jQuery just referencing css-selector in brackets, like this $('css-selector')

That snippet does the trick:

$(document).ready(function() {
  var dataAdd = [];
  $("#addNew").click(function() {
    var value = $('#data').val();
    if(value) {
      dataAdd.push(value);
      $('#nameList').append('<li>' + value + '</li>');
      $('#data').val('');
    }
    console.log(dataAdd.length);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="nameList">
  <li>aston</li>
  <li>baily</li>
  <li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

edited Oct 10, 2018 at 8:10

answered Oct 10, 2018 at 8:04

Marco Dal Zovo

3782 silver badges17 bronze badges

Comments

Mamun · Accepted Answer · 2018-10-10 09:00:17Z

1

You have to append the li with the value of input type text not the button.

$(document).ready(function() {
  var dataAdd = [];
  $("#addNew").click(function() {
    dataAdd.push($('#data').val());
    $('#nameList').append('<li>'+$('#data').val()+'</li>');
    console.log(dataAdd.length);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="nameList">
  <li>aston</li>
  <li>baily</li>
  <li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

edited Oct 10, 2018 at 9:00

answered Oct 10, 2018 at 8:06

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

MahalingaM SubramaniyaM · Accepted Answer · 2018-10-10 09:13:02Z

1

$(document).ready(function() {
  var dataAdd = [];
  $("#addNew").click(function() {
  var htm='<li>'+$('#data').val()+'</li>';
  $("#nameList").append(htm);
  $('#data').val('');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ol id="nameList">
  <li>aston</li>
  <li>baily</li>
  <li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

answered Oct 10, 2018 at 9:13

MahalingaM SubramaniyaM

991 silver badge10 bronze badges

Collectives™ on Stack Overflow

Adding elements to an ordered list on click using jquery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related