Trying to add my input onto a list but I keep getting an error. Can anyone please help me? Here is the code:

HTML:

        <div class="add-item">
            <input id="item-add" type='text' placeholder="Enter item to shopping list..." name="itemAdd"></input>
            <button class="add-btn">Add Item</button>
        </div>
        <div class="item-list">
            <H2>Shopping List</H2>
            <ul class="shop-list">
                <li><input type="checkbox">Item 1</li>
                <li><input type="checkbox">Item 2</li>
                <li><input type="checkbox">Item 3</li>
                <li><input type="checkbox">Item 4</li>
                <li><input type="checkbox">Item 5</li>
            </ul>
        </div>  

jQuery:

$(document).ready(function(){
    $(".add-btn").click(function (){
        var x = $('#item-add').val();
        $(".shop-list").append('x');
    });

});

Trying to add my input onto a list but I keep getting an error. Can anyone please help me? Here is the code:

HTML:

        <div class="add-item">
            <input id="item-add" type='text' placeholder="Enter item to shopping list..." name="itemAdd"></input>
            <button class="add-btn">Add Item</button>
        </div>
        <div class="item-list">
            <H2>Shopping List</H2>
            <ul class="shop-list">
                <li><input type="checkbox">Item 1</li>
                <li><input type="checkbox">Item 2</li>
                <li><input type="checkbox">Item 3</li>
                <li><input type="checkbox">Item 4</li>
                <li><input type="checkbox">Item 5</li>
            </ul>
        </div>  

jQuery:

$(document).ready(function(){
    $(".add-btn").click(function (){
        var x = $('#item-add').val();
        $(".shop-list").append('x');
    });

});

• javascript
• jquery

• did you include jQuery in the page... – Arun P Johny Commented Sep 16, 2015 at 4:50
• have you included jquery file – Mudassir Hasan Commented Sep 16, 2015 at 4:50
• And if you think you've included it, check it for typos. – David Commented Sep 16, 2015 at 4:51
• if included... did you use noConflict option... if so try jQuery(document).ready(function($){...}); – Arun P Johny Commented Sep 16, 2015 at 4:51
• 3 @DavidTrinh: Unless you are being deliberately obfuscating, app.js is not jQuery. – Amadan Commented Sep 16, 2015 at 4:52

2 Answers 2

You need to include the jQuery library. Add this in the head section.

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>

You need to include the https:// or http:// part of the URL for a src in the <script> tag. Simply code.jquery./jquery.min.js will not find it:

<script src="https://code.jquery./jquery.min.js"></script>

Also make sure jQuery is included first, before your code.