JavaScript only works in IE11 compatibilty mode

Question

I have taught myself HTML and CSS code but I'm still finding JavaScript very hard to understand, now to my problem. I work for a small support group and created a stand alone webpages that has links to several other stand alone webpages. quite often we have to use the same commands in our systems so I made a webpage that would copy text to clipboard using the following code:

<html>
    <head>
        <title>Electrical Application Support</title>
        <link rel="stylesheet" type="text/css" href="CSS/elec-styles.CSS'>
    <style>
        html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
    </style>
    </head>

    <body>
        <h1 class="w3-text-teal w3-center">Password Reset</h1>
        <button onClick="ClipBoard(copytext);">Copy</button><span ID="copytext">text 1</span><br>
        <button onClick="ClipBoard(copytext1);">Copy</button><span ID="copytext1">text 2</span><br>
        <button onClick="ClipBoard(copytext2);">Copy</button><span ID="copytext2">text 3</span><br>
        <button onClick="ClipBoard(copytext3);">Copy</button><span ID="copytext3">text 4</span><b>(make sure the account is theirs)</b><br>
        <button onClick="ClipBoard(copytext4);">Copy</button><span ID="copytext4">text 5</span><br><br>
        <b>If they have a disuser flag then use this:</b><br><br>
        <button onClick="ClipBoard(copytext5);">Copy</button><span ID="copytext5">text 6</span> 
        <textarea ID="holdtext" STYLE="display:none;"></textarea>

        <script language="JavaScript">
        function ClipBoard(ct) {
        holdtext.innerText = ct.innerText;
        Copied = holdtext.createTextRange();
        Copied.execCommand("Copy");
        }
        </script>
    </body>
</html>

But we have had to update the webpage and have to switch off the compatibility mode so the webpage displays properly but now this JavaScript doesn't work.

I did find this code which does work with the compatibility mode switched off:

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

with:

<p>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

<p>
<button class="js-textareacopybtn">Copy Textarea</button>
</p>

from this post on this website

but I'm not knowledgeable enough to tweak it for use with several different text on the webpage (need up 14 commands) and also what can I swap the textarea to? Used <span> & <div> and the function doesn't work after the change.

@SagarV - no it is not. HTML VALIDATORS are case sensitive if you have certain doctypes — mplungjan, Jun 23 '17 at 14:35
But I think here, it is not the case. And the validation, I think it is for XHTML standards — Sagar V, Jun 23 '17 at 14:37
@MadMiddle: For browser compatibility you need to use `document.getElementById("holdtext").innerText...` it is only (some?) IEs that overload the window object with IDs and NAMEs on the page — mplungjan, Jun 23 '17 at 14:39
`var ct = document.getElementById("copytext"), holdText = document.getElementById("holdtext");` — mplungjan, Jun 23 '17 at 14:48
@SagarV It it's case insensitive, why does it matter what case it's in? :P — Heretic Monkey, Jun 23 '17 at 20:36
@madmiddle .. I'm sorry, I'm sorry, it's been a couple of hectic days! here's a fiddle... I left it with 3 but you can add more https://jsfiddle.net/RachGal/yth418b2/ — Rachel Gallen, Jun 27 '17 at 17:02

score 1 · Accepted Answer · answered Jun 23 '17 at 20:33

1

This looks like fairly roundabout code for something that is relatively straightforward.

As stated, yes, js is case-sensitive, but that's only one issue. You are also calling functions that don't exist (not in your code anyway). I stand to be corrected but I don't know of a standard function called createTextRange().

You don't have any variables defined in the first code block. You should declare variables and then use getElementById to find the appropriate element. You can declare further to get the properties like innerHTML/innerText etc.

Here's alternative code that i came up with (I removed the display:none;)

document.getElementById("Copy").addEventListener("click", ClipBoard, false); 
 
 function ClipBoard() {
    var ct = document.getElementById("ct");
    var ctxt = ct.innerText;
    var hold = document.getElementById("holdtext");
    hold.innerText = ctxt;
  };

#ct{
  font-style: italic;
}

<button id="Copy">Copy</button> 
<span id="ct"><code>set def sys$system TEST 99</code></span>
<br>
<br>
<textarea id="holdtext"></textarea>

This copies the copytext and pastes it into the textarea, which I'm led to understand was the purpose of your code? Fiddle is here

Hope this helps

answered Jun 23 '17 at 20:33

Rachel Gallen

27,943
21
72
81

Thank you Rachel, my end goal was to simply add pre-determined text to the clipboard. But I have to expand the code to run for up to 14 different text. – Andy M Jun 26 '17 at 08:29
Then I suggest you make the IDs into classes and use getElementsByClassName. Should be easy enough to adapt. – Rachel Gallen Jun 26 '17 at 10:50
You could just add a loop if you we're copying all at the same time. Also you don't need the code bit. Please accept my answer by hovering beside the answer and clicking on the checkmark – Rachel Gallen Jun 26 '17 at 10:53
I have 14 commands (lines of text) that I would like to copy to the clipboard individually with their own copy button is that possible ? – Andy M Jun 26 '17 at 11:35
Yes, but change the IDs to class names so that in the CSS the hash is a dot and then in the function use getElementsByClassName instead of getElementById – Rachel Gallen Jun 26 '17 at 11:40
If you want to use individual names for your buttons and spans etc., you can do this using IDs . You could pass In the ids as arguments to the function instead of replicating the code – Rachel Gallen Jun 26 '17 at 11:41
I'm having lunch but I'll make a fiddle later. Would appreciate if you accepted answer. – Rachel Gallen Jun 26 '17 at 11:48
Thank you for your time Rachel it's much appreciated and like I said JavaScript is a dark art to me, even with your direction I will put my hands up and say that i really don't know what I'm doing. I have been searched for over 3 weeks now and I can only guess that IE11 with compatibility switched off is not liking .execCommand("Copy"). – Andy M Jun 26 '17 at 11:55
Yes, that command doesn't exist as far as I know.. that's not just an IE thing! JavaScript is okay, it just takes a while to get used to. It's very useful! Mid-making tuna melt now.. will fiddle after! On my phone now :) – Rachel Gallen Jun 26 '17 at 12:00
yeah really no rush as you are doing me a favour. – Andy M Jun 26 '17 at 12:44
This fiddle works but you have to hit the same [first] copy button at the top, and I haven't pinpointed a fix for it yet , but can't really afford any more time on it. I hope it helps and that you get the gist! https://jsfiddle.net/RachGal/ntgakp45/ – Rachel Gallen Jun 26 '17 at 15:09
Thank you for your time, I'm starting to understand now and borrowed a couple of books from our library to further my knowledge in the subject. – Andy M Jun 28 '17 at 09:08
Wonderful, glad I could help. It's well worth learning. Very useful! :) – Rachel Gallen Jun 28 '17 at 09:16

JavaScript only works in IE11 compatibilty mode

1 Answers1