Blogger：Javascriptを追加しましたが、結果が出ません

Question

最初に私はBloggerテンプレートHTMLを編集しました。

私はフッター-1セクションに次のスクリプトを追加しました：その後、私は最初と2番目のボタンをクリック

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

：私は、次のHTMLをブログに追加

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

次何もコピーされません。

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<textarea class="js-copytextarea" id="1" readonly="" style="font-family: courier;">TTTEXTTT</textarea><button class="js-textareacopybtn" data-id="1">CCCOPYYY</button> 
<script> 
$('.js-textareacopybtn').on('click', function(event) { 
    var copyTextarea = $(this).data('id'); 
    $('#' + copyTextarea)[0].select(); 
    document.execCommand('copy'); 
}); 
</script> 

Answer 2

すべてのコードを1か所（たとえば、<div>、またはHTMLウィジェット）に配置します。

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

Answer 3

あなたはJavaScriptがjQueryのを含める必要があります。 やBloggerでのスクリプトでは、この構造を使用します。ボタンがまだレンダリングされていないとして、あなたの問題があります... `copyTextareaBtn`は、未定義になります - - `：<head/>

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