CODEWITHSUNDEEP
jquerylistappend
Andrea D_
Andrea D_

Reputation: 2141

Using jQuery .append should add new li with the value from input field, but it only add empty li

I want to take the item written in the input field and add it to the below list once the button is hit. The way I do it is wrong as the event only append empty li

HTML:

<input type="text" id="newItem">
<button id="button-grocery-list">Add to the grocery list</button>
<ul id="groceryList">
    <li>Milk</li>
    <li>Apples</li>
    <li>Pasta</li>
    <li>Avocado</li>
    <li>Chocolate</li>
</ul>

jQuery: 

let currentItem = $('#newItem').val();
$('#button-grocery-list').click(function(){
    $('#groceryList').append(`<li>${currentItem}</li>`)
});

I tried to do directly append the value of #newItem like this:

$('#groceryList')append(`<li>$('#grocery-list-item-to-add').val()</li>`)

But it didn't work, so I thought to get the value by assigning it to the variable newItem, but the new li are empty.

Why my code doesn't work?

Upvotes: 0

Views: 1150

Answers (3)

Sushil
Sushil

Reputation: 1131

Your code let currentItem = $('#newItem').val(); Doesn't works because it is outside button click event. So execute let currentItem = $('#newItem').val();only after the button is clicked. I would like to suggest to bind and unbind the event while using click events. And also check the if the value of input is undefined or null or empty.

$('#button-grocery-list').off('click').on('click', function() {
    let val = $('#newItem').val();
    if (val !== undefined && val !== '') {
        $('#groceryList').append(`<li>${val}</li>`);
        //$('#newItem').val('');  // Use this line if you want to append the data and clear input box.
    } else {
        //display message or action if input value is blank
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="newItem">
<button id="button-grocery-list">Add to the grocery list</button>
<ul id="groceryList">
    <li>Milk</li>
    <li>Apples</li>
    <li>Pasta</li>
    <li>Avocado</li>
    <li>Chocolate</li>
</ul>

Upvotes: 3

ascsoftw
ascsoftw

Reputation: 3476

You need to move the currentItem variable inside the click callback

//let currentItem = $('#newItem').val();  //Comment here.
$('#button-grocery-list').click(function(){
    let currentItem = $('#newItem').val(); //Define it inside the callback method.
    $('#groceryList').append(`<li>${currentItem}</li>`)
});

Upvotes: 1

Mayank Patel
Mayank Patel

Reputation: 1571

$('#button-grocery-list').click(function(){
    $('#groceryList').append('<li>' +$('#newItem').val() + '</li>');
    $('#newItem').val("");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="newItem">
<button id="button-grocery-list">Add to the grocery list</button>
<ul id="groceryList">
    <li>Milk</li>
    <li>Apples</li>
    <li>Pasta</li>
    <li>Avocado</li>
    <li>Chocolate</li>
</ul>

You have an error in the syntax in your jQuery code. Refer above fiddle. What you need to do it just get the value of the textbox using the "id" selector and append it to your list. Please note, I haven't applied validations.

Upvotes: 2

Related Questions