Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple instances of the same function.

    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>
    Code:
    function ClipBoard1(){
      holdtext1.innerText = copytext1.innerText;
      Copied1 = holdtext1.createTextRange();
      Copied1.execCommand("Copy");
      }
    In the <body>
    Code:
    <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

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    Toronto, ON, Canada
    Posts
    231
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    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>
    rm -f /

  • #3
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply rm-f

    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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <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.

  • #5
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    Toronto, ON, Canada
    Posts
    231
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the line:
    Code:
    document.getElementById('holdtext' + idx).innerText =  document.getElementById('copytext' + idx);
    should be:
    Code:
    document.getElementById('holdtext' + idx).innerText =  document.getElementById('copytext' + idx).innerText;
    rm -f /

  • #7
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

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

  • #8
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    /bump

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

    Thanks,

    Chris.

  • #9
    Regular Coder
    Join Date
    Aug 2005
    Location
    Toronto, ON, Canada
    Posts
    231
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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>
    rm -f /


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •