Adding to an HTML list using JQuery and Javascript

Question

I've got some javascript which I want to be executed and change a list element when a button is clicked:

<button id="click-me" type="button">
     <img  src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/07_plus-128.png" alt="Add to Event" style="width: 50px"/>
</button>

<div>
   <p>Meeting Participants:</p>
   <ol id ="list">

   </ol>
</div>

Javascript/JQuery:

var List = document.getElementById('list');

$(function (){
    $("#click-me").click(function (e){
        e.preventDefault();

        document.getElementById('list').style.backgroundColor = "green";
        var entry = document.createElement("li");
        var testText = document.createTextNode("test")
        entry.appendChild(testText);
        List.appendChild(entry);

        return false;

    });
});

The background colour is successfully turned green, but no list element can be seen to be added. Why isn't my code working? Thanks

Your code works fine: jsfiddle.net/RoryMcCrossan/ay4m05rq. Have you checked the console for errors? Also note that you can make the code much simpler if you use jquery alone: jsfiddle.net/RoryMcCrossan/ay4m05rq/2 — Rory McCrossan
– Rory McCrossan, Commented Jan 25, 2016 at 11:16
The variable List must be undefined, Move var List = document.getElementById('list'); inside $(function (){ ... }); — Satpal
– Satpal, Commented Jan 25, 2016 at 11:17
@Satpal even better if it is moved inside click event handler to ensure that list element was created when click event happened — gurvinder372
– gurvinder372, Commented Jan 25, 2016 at 11:18
the thing is, I'm intending later on to use that List on form submit — S Craig
– S Craig, Commented Jan 25, 2016 at 11:19

gurvinder372 · Accepted Answer · 2016-01-25 11:24:58Z

1

just put List initialization inside click event handler

$(function (){
    $("#click-me").click(function (e){
        e.preventDefault();

        var List = document.getElementById('list');
        document.getElementById('list').style.backgroundColor = "green";
        var entry = document.createElement("li");
        var testText = document.createTextNode("test")
        entry.appendChild(testText);
        List.appendChild(entry);

        return false;

    });
});

answered Jan 25, 2016 at 11:24

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

Comments

logic-unit · Accepted Answer · 2016-01-25 11:32:56Z

1

A jQuery implementation, as you're already using the library:

$(function (){
    $("#click-me").click(function (e){
        $('#list').prepend('<li>test</li>').css('background-color', 'green');
        return false;
    });
});

https://jsfiddle.net/nc9guq2r/

answered Jan 25, 2016 at 11:32

logic-unit

4,31312 gold badges49 silver badges74 bronze badges

Collectives™ on Stack Overflow

Adding to an HTML list using JQuery and Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related