The function created from the JavaScript code is malfunctioning

Question

The function created from the JavaScript code is malfunctioning

I stumbled upon this JavaScript code online:

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");

link.click();

After running it, the file my_data.csv is generated and downloaded automatically. Now, I want to modify it so that when a user clicks a button, the code executes. I attempted to convert it into a function called Testing() and updated my link as follows:

<a href="#" onClick="javascript:Testing()">Test</a>

However, placing the code inside a function seems to break it. What am I doing incorrectly?

The console error message states 'Testing is not defined.'

For reference, here's a jsfiddle: http://jsfiddle.net/F6CWF/

javascript onclick download

Answer 1

Answer №1

You might want to consider implementing a solution similar to the following:

Here's an example of how you can set it up:

<button id='download-btn'>Download CSV</button>

In your JavaScript file, you can add the following function:

document.querySelector( '#download-btn' ).addEventListener( 'click', function () {
    var encodedUri = encodeURI( csvContent );
    var link = document.createElement( 'a' );
    link.setAttribute( 'href', encodedUri );
    link.setAttribute( 'download', 'my_data.csv' );
    link.click();
});

If you need further assistance, feel free to share a fiddle with us.

Answer 2

You might want to consider implementing a solution similar to the following:

Here's an example of how you can set it up:

<button id='download-btn'>Download CSV</button>

In your JavaScript file, you can add the following function:

document.querySelector( '#download-btn' ).addEventListener( 'click', function () {
    var encodedUri = encodeURI( csvContent );
    var link = document.createElement( 'a' );
    link.setAttribute( 'href', encodedUri );
    link.setAttribute( 'download', 'my_data.csv' );
    link.click();
});

If you need further assistance, feel free to share a fiddle with us.

Answer 3

Answer №2

When faced with that problem, there are multiple solutions available:

Solution 1

var link = document.createElement("a");
link.href = "javascript:Testing()";

Solution 2

var link = document.createElement("a");
link.onclick = Testing;

If the examples above do not work, consider using the inline variants:

Inline Solution 1

var link = document.createElement("a");
link.href = "javascript: here goes the function's body";

Inline Solution 2

var link = document.createElement("a");
link.onclick = function() {
  // here goes the function's body
};

Answer 4

When faced with that problem, there are multiple solutions available:

Solution 1

var link = document.createElement("a");
link.href = "javascript:Testing()";

Solution 2

var link = document.createElement("a");
link.onclick = Testing;

If the examples above do not work, consider using the inline variants:

Inline Solution 1

var link = document.createElement("a");
link.href = "javascript: here goes the function's body";

Inline Solution 2

var link = document.createElement("a");
link.onclick = function() {
  // here goes the function's body
};

The function created from the JavaScript code is malfunctioning

Answer №1

Answer №2

Similar questions

Setting up Material UI Icons in your React js project

As I iterated over the Vehicles API data, I encountered an issue while trying to access specific Vehicle information. I received an error message stating "Cannot read property 'id' of undefined

What is the correct procedure for utilizing variables in the parseJson function when working with string objects?

Convert a JSON array with a single element into a valid JavaScript object

Is it possible to utilize $regex alongside $all in mongoDB?

HTML form submission with a grid of multiple choice options

Deactivating checkboxes once the maximum selection has been made through jquery

Using a jquery function within a Laravel view

Issue: Unable to locate the module 'babel-code-frame' in VUEJS (ESLINT)

Navigate a first person simulation using three.js and control your movements with the keyboard arrow

JavaScript encountering a NaN value

What is the best way to manage data that arrives late from a service?

The updateItem function in the JSGrid controller was not called

Is it possible to continuously generate webpages using AJAX?

Can the Automator tool capture a specific section of a website in a screenshot?

numerous ajax requests and array variables

Angular: Where does the problem lie - with the application or the deployment?

Determining Equality in JavaScript: Comparing 2 Objects

Ways to retrieve information from a URL using the .get() method in a secure HTTPS connection

Can you share tips for passing a variable from a post request to a function that accepts parameters as a string or an array of strings in Node.js?