Clipboard.js is failing to copy the content

I tried following this: https://jsfiddle.net/gevorgha/fbeof421/

Here is the code in my html file:

    <!DOCTYPE html>
    <html lang="en">
      <head>
    [...]    
    <script type="text/javascript" src="{{ url_for('static', filename='js/clipboard.min.js') }}"></script>
        <script>
            new Clipboard('.btn');
        </script>

    <body>



    <!-- Target -->
    <div id="bar">Mussum ipsum cacilds...</div>

    <!-- Trigger -->
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
    Copy to clipboard
</button>



      </body>
    </html> 

The issue I'm experiencing is not related to

"{{ url_for('static', filename='js/clipboard.min.js') }}"

When looking at my browser console, I see the following error message:

clipboard.min.js:7 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at o (clipboard.min.js:7)
    at c (clipboard.min.js:7)
    at o (clipboard.min.js:7)
    at e.t [as listenClick] (clipboard.min.js:7)
    at new e (clipboard.min.js:7)
    at (index):13
o   @   clipboard.min.js:7
c   @   clipboard.min.js:7
o   @   clipboard.min.js:7
t   @   clipboard.min.js:7
e   @   clipboard.min.js:7
(anonymous) @   (index):13

The jsfiddle example provided works fine, unlike mine. Any suggestions on how to resolve this issue?

Answer №1

To ensure the javascript functions correctly, it is important that the button has already been created before it is called. This can be achieved by placing the script that calls the button at the bottom of the body section in the HTML code. By doing this, you guarantee that the button exists before the script attempts to interact with it. I trust this clarification provides assistance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"PHP Dilemma: Navigating the Ajax Button Press Situation

I've been attempting to create a button that triggers a PHP script on a webpage and updates only a specific div tag, but so far I haven't had any success. Removing the $ajax section of the script allows my buttons to change states, but as soon as ...

Nodemon failing to trigger auto-refresh

My journey with learning node.js using nodemon has hit a roadblock. Despite following tutorials and installing everything exactly as shown, I'm facing an issue. Whenever I enter 'nodemon index.js' in the terminal, it hosts properly but any c ...

Error: Trying to access 'product-1' property on an undefined object

Having trouble displaying JSON data in my React.js project, I've been stuck on an error for the past couple of days with no luck in solving it. The JSON data is stored in a file named products.json: { "product-1": [ { ...

error : failed to establish a connection to the MongoDB database

Ensure that the first parameter passed to mongoose.connect() or mongoose.createConnection() is a string. MongooseError: The uri parameter for openUri() must be a string, but it was "undefined". Double check that the initial parameter for mongoose.connect() ...

"Utilizing Bootstrap's dropdown.js script independently: A Step-by-Step Guide

Has anyone been able to successfully use the Bootstrap dropdown.js component without integrating the entire Bootstrap library? I've attempted it, but haven't had any luck so far. Upon reading the documentation, it appears that the dropdown.js co ...

How to trigger useEffect when the state changes to the same value using React hooks?

Currently working on a drum-pad app, most features are functional except for one small issue. Quick update: Uploaded the project to codesandbox for anyone willing to take a look: codesandbox.io/s/sleepy-darwin-jc9b5?file=/src/App.js const [index, setIndex ...

Unable to execute controller due to service call testing failure

I'm currently working on writing a code to test the service call in my controller. The goal is to unit test a specific function within the controller that makes the service call and retrieves data. While I am using local JSON for testing purposes, the ...

The `pubnub removeListener` function does not get triggered when the `useEffect` hook

Operating a single chat works perfectly; however, upon entering and exiting a chat screen before re-entering it, double messaging occurs, and the listener remains active despite being placed in the return of useEffect. I attempted the solution provided in ...

Tips for composing a single aggregation within a query

In my query, I wanted to find the first record with a CREATE_DATE greater than or equal to a specific date and less than another date. After calculating the duration between these dates, I needed to write another query. However, I was unsure how to combine ...

Attempting to implement Three.js - ShaderMaterial on a JSF page, encountering an error: Uncaught TypeError - Unable to access property 'textContent' of null

After referencing a previous post that utilized the code found at http://jsfiddle.net/XGWGn/118/, I am attempting to integrate this code from the HTML pane into a JSF 2.1 page. I suspect that my JavaServer Face page content might be the cause of the error ...

Trigger video to play or pause with every click event

Looking to dynamically change the HTML5 video tag with each click of an li tag. Here is the current structure: <div class="flexslider"> <ul class="slides"> <li> <video> <source type="video/mp4" src="http://t ...

Most effective method for displaying 100 images on a single page?

I have a webpage on my site that displays 100 images, but loading them one at a time makes it look unattractive. Is there a way to make it more elegant and visually appealing? ...

Transmit XML data from controller to JavaScript

My goal on the UI is to display a formatted XML string when clicking on a link within a table of objects. I have tried passing the XML string to the View via a ViewModel and then setting it as a data attribute for the link. When clicked, JavaScript reads t ...

Ways to categorize specific columns based on certain criteria

In the code snippet below, I am working with a data grid in premium version. There is a boolean field that determines whether to display the data grouped or inline. If the boolean is true, I want to show the expand group, otherwise display it inline withou ...

Using tags.js with jQuery to automatically hide an input field once the maximum number of tags has

When using the tags() function, there is an option to specify the maximum number of tags (maxTags) allowed in each input field. I want to automatically hide(); the tags-input when the limit of maxTags is reached (e.g., 2) and then show(); it again when ...

Simple guide to decoding JSON in React Native

Currently, I am working on a react native project where I am calling an API to extract data. The extraction process is successful, but now I am facing an issue with taking arguments from the extracted data. Axios({ url: '/Authentification', ...

Choose a HTML element <a> containing a hyperlink reference and a nested child element <li>

Does anyone know of a way in javascript/css to select the (n) <li> in my code, while also specifying that the <li> must have a parent with the current <a> tag containing a specific href link? <a href="www.link.com">CATEGORY NAME& ...

What is the process for implementing a title search filter in Vue.js?

Hey there, hoping you're having a good night! I've been trying to set up a bookstore using Vue.js with code retrieved from a Json api. However, I'm encountering some issues with the "computed" property. Here's the code snippet: new Vue ...

Emphasize user management and interaction in C# programming

In my master page, there is a user control (error control) that is initially hidden (visible set to false). When the submit button is clicked, I show the error control. After postback, I want to focus on this control. To achieve this, I am writing JavaScr ...

Get information collectively in node.js

How can I retrieve 10 records from a MongoDB collection using NodeJs, with each batch containing 10 records? ...