...

View Full Version : Multiple instances of the same function.



chrisrox
10-20-2005, 04:10 PM
Hey guys, I'm very new to JavaScript so forgive me if this is a sipmle question.

I'm creating a simple webpage that has many lines of text on it. Each line of text has a button attached to it which copies that line to the clipboard when clicked.

I have many instances of the exact same function on the same page. At the moment I have just named each function and its variables uniqely. This works, but the code is horrible and bloated...

In the <head>

function ClipBoard1(){
holdtext1.innerText = copytext1.innerText;
Copied1 = holdtext1.createTextRange();
Copied1.execCommand("Copy");
}

In the <body>

<button onClick="ClipBoard1();">copy</button>
<span id="copytext1">Text to be copied</span>
<textarea id="holdtext1" style="display:none;"></textarea>

So for the next button, the function would be "Clipboard2()", with the variables "copytext2" etc, etc...

Is it possible to code this in a way that I wont have to repeat the code hundreds of times?

Thanks,

Chris

rm-f
10-20-2005, 04:32 PM
function ClipBoard(idx){
document.getElementById('holdtext' + idx).innerText = document.getElementById('copytext' + idx);
var Copied = document.getElementById('holdtext' + idx).createTextRange();
Copied.execCommand("Copy");
}


<button onClick="ClipBoard(1);">copy</button>
<span id="copytext1">Text to be copied</span>
<textarea id="holdtext1" style="display:none;"></textarea>

chrisrox
10-20-2005, 04:53 PM
Thanks for the quick reply rm-f :thumbsup:

I'm not getting any errors with your adjusted code, but it only copies;

[object]

to the clipboard.

Any ideas where I messed up?

Thanks,

Chris

_Aerospace_Eng_
10-20-2005, 04:59 PM
Try this

<script type="text/javascript">
function ClipBoard(idx){
document.getElementById('holdtext' + idx).value = document.getElementById('copytext' + idx).innerHTML;
var Copied = document.getElementById('holdtext' + idx).createTextRange();
Copied.execCommand("Copy");
}
</script>
Note: the execCommand("Copy"); will only work in Internet Explorer.

chrisrox
10-20-2005, 05:12 PM
You guys are awesome!

I replaced the "innerHTML" with "innerText" so I don't pick up the html tags and all ships are go!

That cut down the length of my code immensely.

And yeah, I know it only works in IE, but its for a site for my work intranet, and they only run IE *cringe*

Thanks again,

Chris

rm-f
10-20-2005, 05:14 PM
the line:

document.getElementById('holdtext' + idx).innerText = document.getElementById('copytext' + idx);
should be:

document.getElementById('holdtext' + idx).innerText = document.getElementById('copytext' + idx).innerText;

chrisrox
10-23-2005, 04:12 AM
Thanks for the help guys, my code is working fine now, and its a lot less bloated, but I still want to refine it down a little more.

This is my code for the copy buttons:


<button onClick="ClipBoard(1);">copy</button>
<span id="copytext1">Text to be copied</span>
<textarea id="holdtext1" style="display:none;"></textarea>

For the next button, the variables would all be renamed, i.e ClipBoard(2), copytext2, etc.

I'm wondering if there's a way to make the code for every button the same, maybe with a global variable that you attach to the end of the button id, and then increment by one everytime a button is pressed.

I've played around with it a little bit but can't seem to get it to work.

Hope I've explained this clear enough...

Thanks

Chris

chrisrox
10-24-2005, 09:47 AM
/bump

Any ideas? Its driving me crazy giving hundreds of lines of codes unique variable names.

Thanks,

Chris.

rm-f
10-24-2005, 02:49 PM
<html>
<head>
<script>
function ClipBoard(idx){
document.getElementById('holdtext' + idx).innerText = document.getElementById('copytext' + idx).innerText;
var Copied = document.getElementById('holdtext' + idx).createTextRange();
Copied.execCommand("Copy");
}

function ClipboardGenerator() {
this.seqNo = 0;
this.getNext = function(txt) {
var s = '';
s += '<button onClick="ClipBoard(' + this.seqNo + ');">copy</button>';
s += '<span id="copytext' + this.seqNo + '">' + txt + '</span>';
s += '<textarea id="holdtext' + this.seqNo + '" style="display:none;"></textarea>';
this.seqNo++;
document.write(s);
}
}
var clipboardGenerator = new ClipboardGenerator();
</script>
</head>
<body>
blah blah <br>
<script>clipboardGenerator.getNext("Text to be copied");</script> <br>
blah blah <br>
<script>clipboardGenerator.getNext("ccc");</script> <br>
blah blah <br>

<script>
for(var i=0; i<3; i++) {
clipboardGenerator.getNext('text: ' + i);
document.write('<br>');
}
</script>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum