Clicking the add button does absolutely nothing and I dont know why

Question

Does anybody know why the button wont react to input when clicked? I want the click to bring up a prompt and then use the text from the prompt and append it into the hmtl as a list item with the same css as the other list items.

 $(".btn").click(function() { var text = prompt('What do you need to do?') var txt1 = $("<li id=" listItem "><p></p></li>").text(text); $("#itemList").append(txt1); }); 

 body { background: #bff0ff; } li { display: inline-block; float: left; padding: 5px; } #list { list-style-type: none; } #itemList { list-style-type: none; } #listItem { width: 250px; height: 75px; border-radius: 5px; background: #5ABCB9; } #listItem p { font-family: curive, sans-serif; text-align: center; font-size: 20px; color: # } .btn { height: 50px; width: 50px; border-radius: 50%; border: 1px; font-size: 40px; background: #63E2C6; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <input type="button" class="btn" value="+" /> <ul id="itemList"> <li id="listItem"> <p> Study for exams. </p> </li> </ul> 

Answer 1

If you are trying to add more li elements to your existing ul , try the following ( since with your current implementation p element would be ignored when rendered ) :

$(".btn").click(function() {
  var text = prompt('What do you need to do?')
  var $li = $('<li/>',{ 'class' : 'listItem' })
  var $p = $('<p/>', { 'text' : text })
  $($li).append($p);
  $("#itemList").append($li);
});

Example : https://jsfiddle.net/9av0c8z3/

Answer 2

There's a few things you need to do. First of those should be to clean up the errors in your JS, ie this isn't a proper string:

"<li id="listItem"><p></p></li>"

Once you hit the second double quote ( " ) you're no longer working with a string and it thinks listItem is a variable.

I personally use single quotes for strings ( ' ).

'<li id="listItem"><p></p></li>'

Then you'll have to redo how you're using IDs in CSS. IDs should be unique and not re-used, that's what a class is for. So I've changed instances of id="listItem" to class="listItem" and updated the CSS from #listItem to .listItem .

Also, when you do this $( '<li id="listItem"><p></p></li>' ).text( text ); the text gets added to the li and the p is not created. So create the p first, add the text to it then append it to the li .

After that I think you're good to go.

 var $itemList = $( '#itemList' ); $( '.btn' ).click( function( e ) { var text = prompt( 'What do you need to do?' ), p = $( '<p>', { text: text } ), li = $( '<li>', { "class": 'listItem' } ).append( p ); $itemList.append( li ); } ); 

 body { background: #bff0ff; } #itemList, #itemList li { list-style: none; } li { float: left; padding: 5px; } .listItem { width: 250px; height: 75px; border-radius: 5px; background: #5ABCB9; } .listItem p { font-family: curive, sans-serif; text-align: center; font-size: 20px; } .btn { height: 50px; width: 50px; border-radius: 50%; border: 1px; font-size: 40px; background: #63E2C6; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <input type="button" class="btn" value="+"> <ul id="itemList"> <li class="listItem"> <p> Study for exams. </p> </li> </ul>