Jquery関数は複数回必要なときに1回だけ実行します

Question

私は知り、学ぶことが1つ必要です。

$(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>

この関数は、私のテキスト領域にテキストを追加します。 しかし、それを何度も実行する必要があります。 クリックするたびにTEXTを追加したいと思っています。 今は一度しか動作しませんが、2回目は何も効果がありません。 アドバイスをお願いします。

Answer 1

利用append代わりのようなhtml：

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

説明：htmlは古いデータを削除し、新しい追加し、appendは古いデータを保持しながら、新しいものを追加します。

Answer 2

クリックするたびに値をTEXTに設定すると問題が発生します。あなたは値に加えていません。これを行うには、このようなval()を、使用することができます。

$('.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>

あなたが値を更新するappend()を使用することができますが、私は、これは古いブラウザおよび/またはjQueryのバージョンで問題が発生する可能性がありと信じています。

Answer 3

html()メソッドは、古い値を新しいもので上書き/更新します。 `や` .htmlを（.. HTML（）+ 'TEXT'）

$(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>