Slowly working up my javascript and jquery skills right now and I had been attempting to reset a textarea with .val('') and found that I could not append to 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 append at all, rather I can only set the value. Now I also know there are more methods of getting the text from the textarea, such as .value(), but I haven't messed around with that much because I got my code working by using .text('') instead of .val('')
But I ran into some really strange behavior that is easier to just show instead of type out 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>
Can someone explain to me this behavior and the best practice to use? Or is it all really the same and it's just up to preference? Thanks.
EDIT: Bonus jfiddle
Aucun commentaire:
Enregistrer un commentaire