How can I add new list items on field input?

I am working on a simple to-do app.

I would like to add a new element after user clicks on enter in the input box, and nothing happen. I tried lot of ways, I will share the recent code. Do you have any suggestions? Thanks a lot.

UPDATE: It finally works. UPDATE: It finally works. UPDATE: It finally works.

$(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">Vytvořit todo appku</p>
      </div>

      <div class="text-box">
        <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
        <p class="text">Vytvořit todo appku</p>
      </div>

      <div class="text-box">
        <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
        <p class="text">Vytvořit todo appku</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>

Answer

You are very close, a few things to make this work are:

You are using a <form> tag which will (by default) try to submit a form on enter. If you aren’t sending anything to a server you can just remove this html tag
($this) should be $(this) because you want to use the jquery constructor to create a jquery object from the this context.
You are just appending an empty div which you won’t see on the screen. You have to add the input text to the body of the div.

$(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">${input}</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>
      <input type="text" placeholder="Create a new todo" id="text">
    </div>

    <div class="elements">

      <div class="text-box">
        <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
        <p class="text">Vytvořit todo appku</p>
      </div>

      <div class="text-box">
        <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
        <p class="text">Vytvořit todo appku</p>
      </div>

      <div class="text-box">
        <p class="circle"><img class="img-inactive" src="img/icon-check.svg"></p>
        <p class="text">Vytvořit todo appku</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>

Advertisement

Answer