jquery - Updating and clearing textarea not working when content edited-CodePudding

Can someone please support with the code snippet. There are li items. The button "update" updates the textarea content with defined text (data-text). The text area has 2 buttons that copy and clear the textarea content. What doesn't work is when the text in the textarea is edited: Neither do the "update" buttons work nor the clear button. The "copy" button still works. What needs to be changed in the code?

jQuery(function ($) {

        $('.area_update').click(function () {
            var my_var = $(this).data('text');
            $('#area').html(my_var);
            document.querySelector("textarea").select();
            document.execCommand('copy');
        });

    });
    
 jQuery(function ($) {

        $('#clear_area').click(function () {
            $('#area').empty();
        });
    });    
    
  document.querySelector("#copy-btn").onclick = function () {
        document.querySelector("textarea").select();
        document.execCommand('copy');
    };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>aaa<input type="button"  data-text="zzz" value="update" /></li>
    <li>bbb<input type="button"  data-text="yyy" value="update" /></li>
    <li>ccc<input type="button"  data-text="xxx" value="update" /></li>
</ul>

<textarea id='area' name='editor'>test</textarea>
<button id="copy-btn">Copy</button>
<button id="clear_area">Clear</button>

CodePudding user response：

The issue is because you're using html() and empty() to set the value of the textarea. As it's a form control you should use val() instead.

Also note that you're using an odd mix of native and jQuery methods. If you've loaded jQuery in to the page you may as well use it. Also note that you only need a single jQuery document.ready handler; all your code can go within that.

jQuery($ => {
  let $textarea = $('#area');
  
  $('.area_update').on('click', e => {
    var my_var = $(e.currentTarget).data('text');
    $textarea.val(my_var).select();
    document.execCommand('copy'); // are you sure you want to copy the value in the 'update' command?
  });
  
  $('#clear_area').on('click', () => {
    $textarea.val('');
  });
  
  $('#copy-btn').on('click', () => {
    $textarea.select();
    document.execCommand('copy');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>aaa <input type="button"  data-text="zzz" value="update" /></li>
  <li>bbb <input type="button"  data-text="yyy" value="update" /></li>
  <li>ccc <input type="button"  data-text="xxx" value="update" /></li>
</ul>

<textarea id="area" name="editor">test</textarea>
<button id="copy-btn">Copy</button>
<button id="clear_area">Clear</button>

CodePudding user response：

To change the content of the textarea you should use .val() instead of .html(). Try this

jQuery(function ($) {
    $('.area_update').click(function () {
        var my_var = $(this).data('text');
        $('#area').val(my_var);
        document.querySelector("textarea").select();
        document.execCommand('copy');
    });
});

jQuery(function ($) {
    $('#clear_area').click(function () {
        $('#area').val('');
    });
});    
    
document.querySelector("#copy-btn").onclick = function () {
    document.querySelector("textarea").select();
    document.execCommand('copy');
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>aaa<input type="button"  data-text="zzz" value="update" /></li>
    <li>bbb<input type="button"  data-text="yyy" value="update" /></li>
    <li>ccc<input type="button"  data-text="xxx" value="update" /></li>
</ul>


<textarea id='area' name='editor'>test</textarea>
<button id="copy-btn">Copy</button>
<button id="clear_area">Clear</button>