Blogger：添加了Javascript，但没有结果出来 [英] Blogger: Added Javascript but no result came out

问题描述

首先，我编辑了我的Blogger模板HTML。

我在页脚1部分添加了以下脚本：

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

接下来，我使用以下HTML添加了博客：

 < textarea class =js-copytextarea>复制文本所需的文本< / textarea> 
< button class =js-textareacopybtn> 
< img src =https://clipboardjs.com/assets/images/clippy.svgwidth =13alt =复制到剪贴板> 
< / button> 
< textarea class =js-copytextareab>需要复制文本2< / textarea> 
< button class =js-textareacopybtnb> 
< img src =https://clipboardjs.com/assets/images/clippy.svgwidth =13alt =复制到剪贴板> 
< / button> 
  

然后我点击第一个按钮然后第二个按钮，没有任何东西被复制。

解决方案

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/ 2.1.1 / jquery.min.js>< /脚本> 
< textarea class =js-copytextareaid =1readonly =style =font-family：courier;> TTTEXTTT< / textarea>< button class =js-textareacopybtn数据ID = 1 > CCCOPYYY< /按钮> 
< script> （'click'，function（event）{
 var copyTextarea = $（this）.data（'id'）; 
 $（'。js-textareacopybtn'）。 '＃'+ copyTextarea）[0] .select（）; 
 document.execCommand（'copy'）; 
}）; 
< / script> 
  

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.

解决方案

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

这篇关于Blogger：添加了Javascript，但没有结果出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！