html - Blogger: Added Javascript but no result came out

Question

First I edited my Blogger Template HTML.

I added the following script in the footer-1 section:

<script type="text/javascript">
//<![CDATA[
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();
});
var copyTextareaBtnb = document.querySelector('.js-textareacopybtnb');
copyTextareaBtnb.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextareab');
  copyTextarea.select();
});
//]]>
</script>

Next I added a blog with the following HTML:

<textarea class="js-copytextarea">text needed to copy</textarea>    
<button class="js-textareacopybtn">
<img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard">
</button>
<textarea class="js-copytextareab">text 2 needed to copy</textarea>    
<button class="js-textareacopybtnb">
<img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard">
</button>

Then I clicked on the first and then second button, nothing is copied.

Answer 1

Place all your code in one place (<div>, for example, or HTML widget). And for scripts in Blogger use this structure:

<script type="text/javascript">
//<![CDATA[
your js code here
//]]>
</script>