PrinceTaz Posted December 13, 2014 Share Posted December 13, 2014 (edited) I am trying to create a webpage and I've added some jQuery to it but it is not working, can you help me out? JS File: $(document).ready(function() { $('#button').click(function() { var toAdd = $('input[name=add]').val(); $('.message').append("<li>" + toAdd + "</li>") }); }); HTML: <html> <head> <title> Test page </title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type='text/javascript' src='script.js'></script> </head> <body> <div class="top-section"> <div class="top-back"> <div class="tcontent"> <div class="tcontent-body"> <h1>Welcome to the Forum Pioneer Test Page</h1> <ul> <li>This will be a list of to do's.</li> <li>Add your own list below</li> </ul> <form> <input type="text" name="add" value="Type Here"> </form> <div id="button">Add</div> <div id="message">d</div> </div> </div> </div> </div> </body> </html> I've put only the elements that are affected. I try clicking the button, but the content isn't appended. Edited December 13, 2014 by PrinceTaz Quote Link to comment Share on other sites More sharing options...
kicken Posted December 13, 2014 Share Posted December 13, 2014 You use .message in your jQuery code which is going to look for elements with class="message". Your element however is id="message which means you need to be using #message to reference it. You're also generating invalid HTML since your adding <li> tags inside a <div> tag which is not allowed. Either make your div a list (ul or ol) or use something other than li tags. Quote Link to comment Share on other sites More sharing options...
PrinceTaz Posted December 13, 2014 Author Share Posted December 13, 2014 Aha, thank you, it works now. Well I already have a <ul> and I want to add the <li> in there. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.