Cheerful evening, tell me, please, what methods to use to click on the plus sign or Enter to take the value from <input> and add it, for example, to <span> below. Threw an example to make it clearer.

 // module__account-note (function() { var add = $('.jsPlus'), input = $('.jsInput'); add.click(function(){ }); })();
  • You can get the value of the input field using the text method, and add it to the span using the append method - diraria

3 answers 3

A full functional example and no jQuery (nice layout by the way):

 var addNote = document.querySelector(".module__account-note__str-3"); var input = document.querySelector(".jsInput"); var noteContainer = document.querySelector(".module__account-note__container"); function addTextNoteFromInput() { var value = input.value; if (value.trim().length < 1) { alert("Длина заметки слишком короткая"); } else { var child = document.createElement("span"); child.setAttribute("class", "module__account-note__str-4"); child.innerText = value; noteContainer.appendChild(document.createElement("br")); noteContainer.appendChild(child); } } function pressEnter(event) { if (event.keyCode === 13) { addTextNoteFromInput(); } } addNote.addEventListener("click", addTextNoteFromInput, false); window.addEventListener("keydown", pressEnter, false); 
 input[type='text'], textarea, select { border-radius: 0; -webkit-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input, textarea { font-family: 'helveticaneuecyr-roman-webfont'; font-size: 14px; margin: 0; padding: 10px 10px; -webkit-transition: ease-in-out .2s; -moz-transition: ease-in-out .2s; -ms-transition: ease-in-out .2s; -o-transition: ease-in-out .2s; transition: ease-in-out .2s; color: #242424; border: none; border: 1px solid #5d5d5d; border-radius: 0; background: transparent; } .module__account-note { height: 550px; margin-top: 30px; padding: 40px 38px; background: #2c2c2c; } .jsPlus { color: white; } .module__account-note__str { font-size: 16px; display: block; padding-bottom: 20px; text-transform: uppercase; color: #ffc215; border-bottom: 1px solid #1d1d1d; } .module__account-note__row { padding: 18px 0; border-bottom: 1px solid #1d1d1d; } .module__account-note__str-3 { font-size: 20px; cursor: pointer; } .module__account-note__str-2 { width: 200px; padding: 0; color: #797979; border: none; } .module__account-note__str-4 { margin: 20px 0; color: #fff; } 
 <div class="module__account-side__bottom"> <div class="module__account-note"> <span class="module__account-note__str">БЛОКНОТ</span> <div class="module__account-note__row row between"> <input class="jsInput module__account-note__str-2" type="text" placeholder="Оставить заметку" /> <span class="module__account-note__str-3 jsPlus">+</span> </div> <div class="module__account-note__container"> <span class="module__account-note__str-4">Lorem Ipsum - это текст-"рыба"</span> </div> </div> </div>

    Everything is very simple.

      $('#plus').on('click', function(){ $('#p').html($('#price').val()); });

    But, actually, and a demonstration https://jsfiddle.net/h3a1d7qr/

      Use the .val() method to access the <input> value, and then just add it as text to the element you want.

       (function() { var add = $('.jsPlus'), input = $('.jsInput'); add.click(function(){ $('yourElement').text(input.val()); }); })();