How can I add new list items on field input?-CodePudding

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 ></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 >

    <div >
      <h1>TODO</h1>
      <img src="img/icon-sun.svg"  alt="switcher">
    </div>

    <div >

      <p ></p>
      <form><input type="text" placeholder="Create a new todo" id="text"></form>
    </div>

    <div >

      <div >
        <p ><img  src="img/icon-check.svg"></p>
        <p >Vytvořit todo appku</p>
      </div>

      <div >
        <p ><img  src="img/icon-check.svg"></p>
        <p >Vytvořit todo appku</p>
      </div>

      <div >
        <p ><img  src="img/icon-check.svg"></p>
        <p >Vytvořit todo appku</p>
      </div>

    </div>

    <div >
      <p >5 items left</p>
      <div >
        <p >All</p>
        <p >Active</p>
        <p >Completed</p>
      </div>
      <p >Clear completed</p>


    </div>

  </div>
  </div>
</section>

CodePudding user response：

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 >${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 >

    <div >
      <h1>TODO</h1>
      <img src="img/icon-sun.svg"  alt="switcher">
    </div>

    <div >

      <p ></p>
      <input type="text" placeholder="Create a new todo" id="text">
    </div>

    <div >

      <div >
        <p ><img  src="img/icon-check.svg"></p>
        <p >Vytvořit todo appku</p>
      </div>

      <div >
        <p ><img  src="img/icon-check.svg"></p>
        <p >Vytvořit todo appku</p>
      </div>

      <div >
        <p ><img  src="img/icon-check.svg"></p>
        <p >Vytvořit todo appku</p>
      </div>

    </div>

    <div >
      <p >5 items left</p>
      <div >
        <p >All</p>
        <p >Active</p>
        <p >Completed</p>
      </div>
      <p >Clear completed</p>


    </div>

  </div>
  </div>
</section>

CodePudding user response：

here is a example from w3schools. It creates elements when you press add button with the input field value in it..

here is the link