0

I have a question. I've been coding a jQuery event where the button with an ID of add is ticked and is updated to an input

Here is the jQuery code 

/* Change the Add button to an Input element*/
$("#add").click(function(){
    $(this).replaceWith("<input type='text' placeholder='Task'>");
    $("div.tasks>span").remove();
});

/* Adding a value to the list */
$("input").keydown(function(e){
    if(e.keyCode == 13){
        var item = $(this).val();

        $(this).parent().prepend("<li>" + item + "</li>");
        $(this).val("");
    }
});

Here is the HTML:

<header class="content-header">
    <img src="img/icon.png" alt="icon" class="header-icon">
    <h1>Monday</h1>
    <img src="img/icon.png" alt="icon" class="header-icon flipped"> 
    <!-- <p>6 <span>Tasks</span></p>-->
</header>
<div class="tasks"> 
    <hr>
    <button id="add"></button>
    <span> Add task</span>
    <input type="text">
</div>

Whats supposed to happen here is once the Button has been ticked it will now turn to an input element.

And once the input element has been populated with data and keycode==13 is pressed (Enter). The value placed on the input element will now be added to the DOM within a li element.

Tajkia Rahman Toma
  • 472
  • 1
  • 5
  • 16
revilio.
  • 56
  • 8
  • 1
    Here is a working solution for your problem [https://jsfiddle.net/Kunalh/a27d3pq7/1/](https://jsfiddle.net/Kunalh/a27d3pq7/1/) – Nishant123 Jul 14 '16 at 07:37
  • @Rory McCrossan, thanks for the heads up about that post! I'll be sure to read the heck out of it. @Nishant123, whoa! Thanks! That's exactly what I need. I see you've used the `on()` and the `bindevent()` commands, I'm still not quite familiar with those two. But for the `on()` I kind of need a description as to what happened there. Thanks for the reply buddy! – revilio. Jul 14 '16 at 12:01

0 Answers0