There is such a code. The text variable takes the value entered in the text input, the elemText variable is a piece of code that will be added when you click in the appropriate place. By clicking on the button with the class main_block_input_field_inputs_button, the value from the input to the span should be added with the class contenInput (js code). But the result is not exactly what was required. First it displays an empty field, then only after the second click it assigns a value from input, plus all values ​​change depending on the new value of input, that is, n is saved. Can you please tell how to make the value of the input immediately added after the first click on the button, as well as how to make the value of the field already added after you add a new field with a new value of input? Thank you

$(document).ready(function(){ var text = $('.main_block_input_field_inputs_text'); var elemText = '<li class = "todo_block_list_item">'+ '<div class = "todo_block_list_item_row"><div class = "todo_block_list_item_row_checkbox">'+ '<input type="checkbox" name=""></div><div class = "todo_block_list_item_row_name">'+ '<span class = "contenInput"></span>'+ '</div><div class = "todo_block_list_item_row_edit">'+ '<div><div class = "todo_block_list_item_row_edit_up_block">'+ '<i class="fa fa-caret-up" aria-hidden="true"></i></div><div>'+ '<i class="fa fa-caret-down" aria-hidden="true"></i></div></div>'+ '<div class = "todo_block_list_item_row_edit_pencil_trash">'+ '<i class="fa fa-pencil" aria-hidden="true"></i></div>'+ '<div class = "todo_block_list_item_row_edit_pencil_trash">'+ '<i class="fa fa-trash-o" aria-hidden="true"></i></div></div></div></li>'; $(".main_block_input_field_inputs_button").click(function () { $('.contenInput').text($(text).val()); $('.todo_block_list').queue(function () { $(this).prepend(elemText); $(this).dequeue(); }); }); }); 
 * { box-sizing: border-box; } body { background-color: yellow; } .main_head { color: black; text-transform: uppercase; text-align: center; font-size: 25px; font-weight: 800; } .main_block { width: 700px; margin: 0 auto; } .main_block_top { display: flex; justify-content: space-between; align-items: center; background-color: #4271a9; height: 52px; } .main_block_top:hover { cursor: pointer; } .main_block_top_left_text { color: white; font-size: 20px; } .main_block_top_left .fa { margin: 0 20px; color: black; font-size: 25px; } .main_block_top_right .fa { color: #98b0d2; font-size: 20px; } .main_block_top_right { position: relative; } .main_block_top_right .fa-trash-o { margin: 0px 20px 0px 10px; } .main_block_top_right .fa-pencil { margin: 0px 11px 0px 0px; } .main_block_top_right .fa-pencil:after { content: ''; position: absolute; width: 1px; height: 20px; background: #98b0d2; margin-left: 10px; } .main_block_top_right .fa:hover { color: white; } .main_block_input_field { background-color: #dcdcdc; height: 52px; display: flex; text-align: center; justify-content: space-around; } .main_block_input_field_plus { display: flex; align-items: center; } .main_block_input_field .fa-plus { color: #598f70; font-size: 40px; } .main_block_input_field_inputs { display: flex; align-items: center; } .main_block_input_field_inputs_text { width: 530px; height: 29px; color: black; padding-left: 15px; box-shadow: inset 0 2px 2px -20px black; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #bbbbbb; } ::-moz-placeholder { /* Firefox 19+ */ color: #bbbbbb; } :-ms-input-placeholder { /* IE 10+ */ color: #bbbbbb; } :-moz-placeholder { /* Firefox 18- */ color: #bbbbbb; } .main_block_input_field_inputs_button { width: 108px; color: white; background-color: #52896a; background: linear-gradient(to top, #52896a, #91c8ab); height: 29px; border: #447557 1px solid; outline: none; border-radius: 0px 5px 5px 0px; } .main_block_input_field_inputs_button:hover { cursor: pointer; } .todo_block { background-color: white; } .todo_block_list { list-style: none; padding: 0px; margin: 0px; } .todo_block_list_item { border: #e7ebea 1px solid; } .todo_block_list_item:hover { background-color: #fcfed5; cursor: pointer; } .todo_block_list_item:hover .todo_block_list_item_row_edit { display: flex; } .todo_block_list_item_row { display: flex; align-items: stretch; min-height: 48px; } .todo_block_list_item_row_edit { display: flex; align-items: center; justify-content: space-around; width: 113px; min-height: 48px; display: none; color: #999999; position: relative; } .todo_block_list_item_row_edit .fa:hover { color: black; } .todo_block_list_item_row_checkbox { width: 40px; border-right: #efdadf 1px solid; min-height: 48px; display: flex; align-items: center; position: relative; } .todo_block_list_item_row_checkbox input { margin: 0 auto; } .todo_block_list_item_row_name { width: 540px; padding-left: 10px; border-right: #e7ebea 1px solid; min-height: 48px; display: flex; align-items: center; color: #999999; } .todo_block_list_item_row_checkbox:after { content: ''; position: absolute; width: 1px; height: 100%; background: #efdadf; right: -5px; } .todo_block_list_item_row_edit_pencil_trash { position: relative; } .todo_block_list_item_row_edit_pencil_trash:before { content: ''; position: absolute; width: 1px; height: 100%; background: #cccccc; left: -13px; } .todo_block_list_item_row_edit_up_block { border-bottom: 1px solid #999999; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class = "main_head">simple todo lists</p> <div class = "main_block"> <div class = "main_block_top"> <div class = "main_block_top_left"><i class="fa fa-calendar-check-o" aria-hidden="true"></i><span class = "main_block_top_left_text">Complete the test task for</span></div> <div class = "main_block_top_right"><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash-o" aria-hidden="true"></i></div> </div> <div class = "main_block_input_field"> <div class = "main_block_input_field_plus"><i class="fa fa-plus" aria-hidden="true"></i></div> <div class = "main_block_input_field_inputs"> <input type="text" name="text" placeholder="start typing here to create task" class = "main_block_input_field_inputs_text" id = "text" value = ""> <input type="button" name="" value="Add Task" class = "main_block_input_field_inputs_button"> </div> </div> <div class = "todo_block"> <ul class = "todo_block_list"> <li class = "todo_block_list_item"> </li> </ul> </div> </div>

  • Sorry for the offtopic, but what a terrible class names? - websnap
  • In the code, the devil himself will break his leg, it is better to rewrite everything from scratch than to correct ... - Air
  • Well, these classes are convenient for me. What's wrong with the code? there is no need to crawl into the CSS, there are a couple of selectors in HTML, and in the script there are 2 variables and 2 small functions - Yaroslav Saenko

1 answer 1

You use classes as selectors, so the text changes everywhere.
Create a new element, find the necessary class inside it, change the text, and then add it all to the diva. Well, queue here is also not clear what.

 $(".main_block_input_field_inputs_button").click(function () { $(elemText).find(".contenInput") .text($(text).val()) .end() .prependTo(".todo_block_list"); }); 

 $(document).ready(function(){ var text = $('.main_block_input_field_inputs_text'); var elemText = '<li class = "todo_block_list_item">'+ '<div class = "todo_block_list_item_row"><div class = "todo_block_list_item_row_checkbox">'+ '<input type="checkbox" name=""></div><div class = "todo_block_list_item_row_name">'+ '<span class = "contenInput"></span>'+ '</div><div class = "todo_block_list_item_row_edit">'+ '<div><div class = "todo_block_list_item_row_edit_up_block">'+ '<i class="fa fa-caret-up" aria-hidden="true"></i></div><div>'+ '<i class="fa fa-caret-down" aria-hidden="true"></i></div></div>'+ '<div class = "todo_block_list_item_row_edit_pencil_trash">'+ '<i class="fa fa-pencil" aria-hidden="true"></i></div>'+ '<div class = "todo_block_list_item_row_edit_pencil_trash">'+ '<i class="fa fa-trash-o" aria-hidden="true"></i></div></div></div></li>'; $(".main_block_input_field_inputs_button").click(function () { $(elemText).find(".contenInput") .text($(text).val()) .end() .prependTo(".todo_block_list"); }); }); 
 * { box-sizing: border-box; } body { background-color: yellow; } .main_head { color: black; text-transform: uppercase; text-align: center; font-size: 25px; font-weight: 800; } .main_block { width: 700px; margin: 0 auto; } .main_block_top { display: flex; justify-content: space-between; align-items: center; background-color: #4271a9; height: 52px; } .main_block_top:hover { cursor: pointer; } .main_block_top_left_text { color: white; font-size: 20px; } .main_block_top_left .fa { margin: 0 20px; color: black; font-size: 25px; } .main_block_top_right .fa { color: #98b0d2; font-size: 20px; } .main_block_top_right { position: relative; } .main_block_top_right .fa-trash-o { margin: 0px 20px 0px 10px; } .main_block_top_right .fa-pencil { margin: 0px 11px 0px 0px; } .main_block_top_right .fa-pencil:after { content: ''; position: absolute; width: 1px; height: 20px; background: #98b0d2; margin-left: 10px; } .main_block_top_right .fa:hover { color: white; } .main_block_input_field { background-color: #dcdcdc; height: 52px; display: flex; text-align: center; justify-content: space-around; } .main_block_input_field_plus { display: flex; align-items: center; } .main_block_input_field .fa-plus { color: #598f70; font-size: 40px; } .main_block_input_field_inputs { display: flex; align-items: center; } .main_block_input_field_inputs_text { width: 530px; height: 29px; color: black; padding-left: 15px; box-shadow: inset 0 2px 2px -20px black; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #bbbbbb; } ::-moz-placeholder { /* Firefox 19+ */ color: #bbbbbb; } :-ms-input-placeholder { /* IE 10+ */ color: #bbbbbb; } :-moz-placeholder { /* Firefox 18- */ color: #bbbbbb; } .main_block_input_field_inputs_button { width: 108px; color: white; background-color: #52896a; background: linear-gradient(to top, #52896a, #91c8ab); height: 29px; border: #447557 1px solid; outline: none; border-radius: 0px 5px 5px 0px; } .main_block_input_field_inputs_button:hover { cursor: pointer; } .todo_block { background-color: white; } .todo_block_list { list-style: none; padding: 0px; margin: 0px; } .todo_block_list_item { border: #e7ebea 1px solid; } .todo_block_list_item:hover { background-color: #fcfed5; cursor: pointer; } .todo_block_list_item:hover .todo_block_list_item_row_edit { display: flex; } .todo_block_list_item_row { display: flex; align-items: stretch; min-height: 48px; } .todo_block_list_item_row_edit { display: flex; align-items: center; justify-content: space-around; width: 113px; min-height: 48px; display: none; color: #999999; position: relative; } .todo_block_list_item_row_edit .fa:hover { color: black; } .todo_block_list_item_row_checkbox { width: 40px; border-right: #efdadf 1px solid; min-height: 48px; display: flex; align-items: center; position: relative; } .todo_block_list_item_row_checkbox input { margin: 0 auto; } .todo_block_list_item_row_name { width: 540px; padding-left: 10px; border-right: #e7ebea 1px solid; min-height: 48px; display: flex; align-items: center; color: #999999; } .todo_block_list_item_row_checkbox:after { content: ''; position: absolute; width: 1px; height: 100%; background: #efdadf; right: -5px; } .todo_block_list_item_row_edit_pencil_trash { position: relative; } .todo_block_list_item_row_edit_pencil_trash:before { content: ''; position: absolute; width: 1px; height: 100%; background: #cccccc; left: -13px; } .todo_block_list_item_row_edit_up_block { border-bottom: 1px solid #999999; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class = "main_head">simple todo lists</p> <div class = "main_block"> <div class = "main_block_top"> <div class = "main_block_top_left"><i class="fa fa-calendar-check-o" aria-hidden="true"></i><span class = "main_block_top_left_text">Complete the test task for</span></div> <div class = "main_block_top_right"><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash-o" aria-hidden="true"></i></div> </div> <div class = "main_block_input_field"> <div class = "main_block_input_field_plus"><i class="fa fa-plus" aria-hidden="true"></i></div> <div class = "main_block_input_field_inputs"> <input type="text" name="text" placeholder="start typing here to create task" class = "main_block_input_field_inputs_text" id = "text" value = ""> <input type="button" name="" value="Add Task" class = "main_block_input_field_inputs_button"> </div> </div> <div class = "todo_block"> <ul class = "todo_block_list"> <li class = "todo_block_list_item"> </li> </ul> </div> </div>

  • Thanks, everything works now. queue was used because it didn’t work without it, and it didn’t work out with it ... I recently started using Java script, I don’t know everything in jakeweri. - Yaroslav Saenko