I have been working on developing a simple to-do app and I am encountering an issue. After the user clicks enter in the input box, nothing happens as expected. Despite trying various methods, the problem persists. Below is the recent code that I have been working with. Any suggestions would be greatly appreciated. Thank you.
UPDATE: The issue has finally been resolved.
$(document).ready(function() { // Input - creating a new element // $(':input').on('keypress', function(e) { if (e.which == 13 && $('#text').val().length != 0) { var input = ($this).val() $('.elements').append('<div class="text-box"></div>'); // i would like to add other elements inside a div, but i need to first get it work. // } }); })<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <img src="img/bg-desktop-dark.jpg" alt="background"> </header> <section> <div class="container section-content"> <div class="headline"> <h1>TODO</h1> <img src="img/icon-sun.svg" class="switcher" alt="switcher"> </div>
<div class="create">
<p class="circle"></p> <form><input type="text" placeholder="Create a new todo" id="text"></form> </div>
<div class="elements"> <div class="text-box"> <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p> <p class="text">Create a to-do app</p> </div> <div class="text-box"> <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p> <p class="text">Create a to-do app</p> </div> <div class="text-box"> <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p> <p class="text">Create a to-do app</p> </div> </div>
<div class="bottom"> <p class="items-left">5 items left</p> <div class="functions"> <p class="all">All</p> <p class="active">Active</p> <p class="completed">Completed</p> </div> <p class="clear">Clear completed</p> </div> </div> </div> </section>