onclick 在 html 中给我一个错误。我该如何纠正这个问题？

Question

I'm fairly new to JS. In my index.html, I have a button defined as:

 <button id="copyPicture" onclick="copyPage();" class="btn">Copy Page!</button>

and in my script.js, I have:

function copyPage() {
    // Select the entire page
    var page = document.body;
    var range = document.createRange();
    range.selectNode(page);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  
    // Copy the selected page to the clipboard
    document.execCommand('copy');
  
    // Remove the selection
    window.getSelection().removeAllRanges();
  }

When I inspect the page in Chrome, as soon as I click on the button, I get:

(index):87 Uncaught ReferenceError: copyPage is not defined at HTMLButtonElement.onclick

What am I doing wrong?

When I click on the button, I am expecting the whole page to get copied to the clipboard so that I can paste it on emails, social medias, etc.

Answer 1

Based on the error it looks like your JS is not properly included. copyPage function is not available when you click on the button. The snippet should work.

 function copyPage() { // Select the entire page var page = document.body; var range = document.createRange(); range.selectNode(page); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); // Copy the selected page to the clipboard document.execCommand('copy'); // Remove the selection window.getSelection().removeAllRanges(); }

 <button id="copyPicture" onclick="copyPage();" class="btn">Copy Page!</button> <p>Test text</p>