Textbox text value is undefined or cryptic message-CodePudding

I want to give the entered name to the header. this is my textarea and the header, which is in another html file though:

<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<h1 id="noteheader"></h1>

I'm trying to get its value with the following code:

$( "#s1" ).click(function(e) {
    e.preventDefault();
    var h = document.getElementById('noteheader');
    var header = String($('floatingTextarea').value);
    h.innerHTML = header;
  });}

but it seems to be undefined even though I typed something in the textarea. I've tried it with innerHTML, innerText and also val, which just gives me a cryptic output like:

function(n){var r,e,i,t=this[0];return arguments.length?(i=m(n),this.each(function(e){var t;1===this.nodeType&&(null==(t=i?n.call(this,e,S(this).val()):n)?t="":"number"==typeof t?t ="":Array.isArray(t)&&(t=S.map(t,function(e){return null==e?"":e ""})),(r=S.valHooks[this.type]||S.valHooks[this.nodeName.toLowerCase()])&&"set"in r&&void 0!==r.set(this,t,"value")||(this.value=t))})):t?(r=S.valHooks[t.type]||S.valHooks[t.nodeName.toLowerCase()])&&"get"in r&&void 0!==(e=r.get(t,"value"))?e:"string"==typeof(e=t.value)?e.replace(yt,""):null==e?"":e:void 0}

CodePudding user response：

So many error on your code.

Here is pure jQuery version.

$("#s1").click(function(e) {
  e.preventDefault();
  var h = $('#noteheader');
  var header = $('#floatingTextarea').val();
  h.html(header);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<h1 id="noteheader"></h1>
<button id="s1">S1</button>

CodePudding user response：

$("#s1").on('click',function(e) {

    e.preventDefault();
    var h = document.getElementById('noteheader');
    var header = $('#floatingTextarea').val();
    h.innerHTML = header;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control" 
          placeholder="Leave a comment here" 
          id="floatingTextarea"></textarea>
<h1 id="noteheader"></h1>
<button id="s1">Save</button>

Your code was missing this:

$('#floatingTextarea').val();

.value is JS property to get value. for JQuery code you have .val()