Geek Answers Handbook

Why does adding a text field only work with .text and not with .val?

Slowly processing my javascript and jquery skills right now, and I tried to reset the text area with .val ('') and found that I could not add it after I had reset it.

var console = $('#console');

function Initialize(data){
    console.text(data);
};

function AddText(data){
    console.append(data);
};

function clearConsole(){
    console.val('');
};

Now, if I change console.text(data)to console.val(data), then I cannot add it at all, I can set the value instead. Now I also know that there are more ways to get text from a text field, for example .value(), but I didn’t cheat like that because I got my code using .text('')instead.val('')

But I came across some really strange behavior that is easier to just show, rather than print a description:

var ta, tb, tc;

$(document).ready(function() {
  ta = $('#ta');
  tb = $('#tb');
  tc = $('#tc');
});

//first textarea
function AddText() {
  if (ta.text()) {
    ta.append(Math.random() + "\n");
  } else {
    ta.text(Math.random() + "\n");
  }
};

function ClearText() {
  ta.text('');
}

//second textarea
function AddVal() {
  tb.append(Math.random() + "\n");
};

function ClearVal() {
  tb.val('');
}

//third textarea
function AddVal2() {
  if (tc.val()) {
    tc.append(Math.random() + "\n");
    alert('Append is being called, but not appending.');
  } else {
    tc.val(Math.random() + "\n");
  }
};

function ClearVal2() {
  tc.val('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<p> Using .text to initialize the textarea allows .append and clearing</p>
<textarea readonly cols=50 rows=5 placeholder="First textarea : A" id="ta"></textarea>
<br>
<button type="button" id="AddText" onclick="AddText()">Add Text</button>
<button type="button" id="ClearText" onclick="ClearText()">Clear</button>
<br>
<p>Using .val to initialize the textarea does not allow .append after clearing</p>
<textarea readonly cols=50 rows=5 placeholder="Second textarea : B" id="tb"></textarea>
<br>
<button type="button" id="AddVal" onclick="AddVal()">Add Text</button>
<button type="button" id="ClearVal" onclick="ClearVal()">Clear</button>
<br>
<p>Using .val to initialize the textarea with the extra checks doesn't append at all.
<br>An alert is generated to show the append is called, but no appending occurs.</p>
<textarea readonly cols=50 rows=5 placeholder="Third textarea : C" id="tc"></textarea>
<br>
<button type="button" id="AddVal2" onclick="AddVal2()">Add Text</button>
<button type="button" id="ClearVal2" onclick="ClearVal2()">Clear</button>
Run codeHide result

- ? , ? .

EDIT: jfiddle

+4
3

, .append .val, .append. .append , .

.text innerHTML HTML, .

.val - , , .

.val,

$el.val($el.val() + "\nnew content");

, , console ( F12).

+2

, - wierd quirk. Quirk , append text, val, text .

, console.log(tb.text(), tb.val()) AddVal(). .

, , , - .

+2

input - html- :

<input value='whatever' />

textarea :

<textarea>this is the content that can be added to</textarea>

, textarea - , , input - ,

+1
source

More articles:


All Articles