两个不同textareas的两个复制按钮

时间:2017-08-02 09:23:38

标签: javascript html copy

我是javascript的新手。我有一个简单的脚本问题。我已经在互联网上搜索了很长时间,我真的不能看出我做错了什么。可能只是我现在无法思考的人。 问题是,当我点击'复制1' - 按钮时,它会复制textarea 2 ...



<textarea id="html" name="html">textarea 1</textarea>
<input type="button" value="Copy 1" onclick="copy_to_clipboard(html);"><br><br><br>
<textarea id="test" name="htmltest">textarea 2</textarea>
<input type="button" value="Copy 2" onclick="copy_to_clipboard(test);">

<script>
function copy_to_clipboard(html)
{
    document.getElementById('html').select();
    document.execCommand('copy');
}
function copy_to_clipboard(test)
{
    document.getElementById('test').select();
    document.execCommand('copy');
}
</script>
&#13;
&#13;
&#13;

我试图让两个不同的textarea与每个复制按钮...

3 个答案:

答案 0 :(得分:1)

这是因为您创建了两个具有相同名称和相同参数的函数。你必须这样做:

&#13;
&#13;
function copy_to_clipboard(ids)
{
    document.getElementById(ids).select();
    document.execCommand('copy');
}
&#13;
<textarea id="html" name="html">textarea 1</textarea>
<input type="button" value="Copy 1" onclick="copy_to_clipboard('html');"><br><br><br>
<textarea id="test" name="htmltest">textarea 2</textarea>
<input type="button" value="Copy 2" onclick="copy_to_clipboard('test');">
&#13;
&#13;
&#13;

在函数中传递的参数,在调用函数时,必须在配额标记中。签入HTML代码。

答案 1 :(得分:0)

在这两种情况下,您使用相同的功能名称。请找到我更新的代码段

<textarea id="html" name="html">textarea 1</textarea>
<input type="button" value="Copy 1" onclick="copy_to_clipboard_1(html);"><br><br><br>
<textarea id="test" name="htmltest">textarea 2</textarea>
<input type="button" value="Copy 2" onclick="copy_to_clipboard(test);">

<script>
function copy_to_clipboard_1(html)
{
    document.getElementById('html').select();
    document.execCommand('copy');
}
function copy_to_clipboard(test)
{
    document.getElementById('test').select();
    document.execCommand('copy');
}
</script>

答案 2 :(得分:0)

问题是你有两个同名的功能。无需制作两种不同的功能。此外,使用您在该函数中传递的参数而不是单独使用硬编码ID名称。在&#39; onclick&#39;中使用引号来传递参数。功能

&#13;
&#13;
{{1}}
&#13;
&#13;
&#13;