Jquery function runs only once when needed multitimes

Question

i need one thing to know and learn.

$(document).ready(function() {
  $('.changetext').click(function() {
    $('.textarea').html('TEXT');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changetext">click me</button>
<div class="textarea"></div>

This function add TEXT to my text area. But i need it run many times i click it. I'm want it add TEXT each time i click, Right now it works only once, second time i click no effect. Advice please.

You will have to use `.append()` or `.html(..html() + 'TEXT')` — Rajesh, Mar 23 '17 at 10:13
the response is here : http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery — Bouraoui KACEM, Mar 23 '17 at 10:15
replace `$('.textarea').html('TEXT');` with `$('.textarea').append('TEXT');`, the html() method replaces the inner html of the element, instead of adding to it. there's also `prepend()` — Velimir Tchatchevsky, Mar 23 '17 at 11:59

score 0 · Answer 1 · answered Mar 23 '17 at 10:14

0

Use append instead of html like:

$('.textarea').append('TEXT');

Explanation: html remove the old data and add new, while append keeps the old data and add the new one.

answered Mar 23 '17 at 10:14

Mayank Pandeyz

25,704
4
40
59

hi, if i want to use variable? that wrote on div that will be added, i know the usage on JS but not at JQ. – Marco Ganzo Mar 23 '17 at 11:29

score 0 · Answer 2 · answered Mar 23 '17 at 10:14

The issue is because you set the value to TEXT on every click; you're not adding to the value. To do this you can use val(), like this:

$('.changetext').click(function() {
  $('.textarea').val(function(i, v) {
    return v + 'TEXT';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textarea"></textarea>
<button class="changetext">Add</button>

You could use append() to update the value, but I believe this may have issues in older browsers and/or versions of jQuery.

Ionut Necula · Answer 3 · 2017-03-23T11:44:15.713

0

html() method overwrites/updates the old values with a new one. You can use append() method to append a new value:

$(document).ready(function() {
  var words = ['I', 'love', 'this', 'website'];
  var counter = 0;
  $('.changetext').click(function() {
    if (words[counter]) {
      $('.textarea').append(words[counter] + " ");
    }
    counter++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea class='textarea'></textarea>
<div class='changetext'>
  Change text
</div>

edited Mar 23 '17 at 11:44

answered Mar 23 '17 at 10:14

Ionut Necula

11,107
4
45
69

hi, if i want to use variable? that wrote on div that will be added, i know the usage on JS but not at JQ. – Marco Ganzo Mar 23 '17 at 11:28
@MarcoGanzo, what do you mean? Variable where? Variable instead of "TEXT"? – Ionut Necula Mar 23 '17 at 11:29
yes, i mean i need to add each time custom text, i want make variable to add each time another text, so i need something that push that word i need – Marco Ganzo Mar 23 '17 at 11:39
@MarcoGanzo, you will have to offer an context/example. What is the logic of these words? What are you trying to achieve? I've also updated the code from my answer. I hope something like that you mean. – Ionut Necula Mar 23 '17 at 11:41
@MarcoGanzo, what I'm supposed to do with that link? Have you checked my updated answer? – Ionut Necula Mar 23 '17 at 11:49
sorry, didn't noticed that added , look you made this : https://jsfiddle.net/6rsqfxor/1/ i want for example var words will outputed from the html, and don't need counter. i need each div generate it own word. – Marco Ganzo Mar 23 '17 at 11:53
@MarcoGanzo, sorry but I don't understand what you are trying to achieve. I would be better if you add a jsfiddle of your own code and tell me what have you tried and what is not working. What `div`? You need to take in consideration that you cannot append `HTML` tags inside the `textarea` element, unless you want to see them inside the textarea as texts. Please create a jsfiddle with your whole relevant code. I'm not here to code for you, but I can help you fix the code if you already have. Try to put some effort when asking something. – Ionut Necula Mar 23 '17 at 11:55
https://jsfiddle.net/6rsqfxor/2/ i didn't want to duplicate JQ code, asked if possible something more comfortable instead copy same code couple times – Marco Ganzo Mar 23 '17 at 12:11
@MarcoGanzo, still doesn't make sense what you are trying to achieve. In your question you said you wanted to append some text inside a textarea. Maybe you should post another question where you should add a better explanation on what you're trying to do. and post me the link here. – Ionut Necula Mar 23 '17 at 15:06

Jquery function runs only once when needed multitimes

3 Answers3