JSFiddle - React, Tailwind, and code Playground

by acdcjunior

HTML

<br>Type anything in this textarea and then click a button:<br><br>
<textarea id="myTextArea" cols="50" rows="3">type something here</textarea>

    
<br /><br /><b>READING FROM THE TEXTAREA</b><br />

<button id="btn1">1: $("#myTextArea").val()</button>
Use this if you have jQuery<br />

<button id="btn2">2: document.getElementById('myTextArea').value</button>
Use this if you just want plain JavaScript<br />

    
<br />Dont use these below. Notice that if you change (type some text in) the textarea, .html() and .innerHTML will not pick up the changes, while val()/value will.<br>
    
<button id="btn3">3: $("#myTextArea").html()</button><br />
<button id="btn4">4: document.getElementById('myTextArea').innerHTML</button>

    
<br /><br /><b>WRITING TO THE TEXTAREA</b><br />
    
<button id="btn5">5: $("#myTextArea").val('new value jQ')</button><br />
<button id="btn6">6: document.getElementById('myTextArea').value = 'new value JS'</button>

JavaScript

$('#btn1').click(function() {
    alert(  $("#myTextArea").val()  );
});
$('#btn2').click(function() {
    alert(  document.getElementById('myTextArea').value  );
});
$('#btn3').click(function() {
    alert(  $("#myTextArea").html()  );
});
$('#btn4').click(function() {
    alert(   document.getElementById('myTextArea').innerHTML  );
});
$('#btn5').click(function() {
    $("#myTextArea").val('new value jQ');
});
$('#btn6').click(function() {
    document.getElementById('myTextArea').value = 'new value JS';
});