I'm having issues with JavaScript not detecting the click event on a button. Here is my HTML code:

<input type="button" value="Upload"
       id="filemanagement_uploadbutton[0]"
       name="filemanagement_uploadbutton"
       onclick="javascript:uploadFiles();"
       >

Here is my JavaScript code (with console.log commands for error checking):

let fileButtons = document.getElementsByName('filemanagement_uploadbutton');
console.log(fileButtons.length);    // returns 2, since I have two buttons
console.log(fileButtons[0].id);     // returns filemanagement_uploadbutton[0]
console.log(fileButtons[0].type);   // returns button
console.log(fileButtons[0].click);  // returns javascript:uploadFiles();
fileButtons[0].click();

I've also tried:

let fileButton = document.getElementsByName('filemanagement_uploadbutton')[0];
fileButton.click();

Both of these result in the error:

Uncaught TypeError: fileButtons[0].click is not a function

or

Uncaught TypeError: fileButton.click is not a function

How is it telling me that click is not a function on the element that it's telling me the click function is javascript:uploadFiles(); literally one element above?

Edit: I've also tried these variations:

let fileButtons = document.getElementsByName('filemanagement_uploadbutton')[0];   //obviously the command for fileButtons[0].length won't work here as expected, so I comment it out
let fileButton = document.getElementById('filemanagement_uploadbutton[0]');

with the appropriate changes to the code below when I reference them.

I'm having issues with JavaScript not detecting the click event on a button. Here is my HTML code:

<input type="button" value="Upload"
       id="filemanagement_uploadbutton[0]"
       name="filemanagement_uploadbutton"
       onclick="javascript:uploadFiles();"
       >

Here is my JavaScript code (with console.log commands for error checking):

let fileButtons = document.getElementsByName('filemanagement_uploadbutton');
console.log(fileButtons.length);    // returns 2, since I have two buttons
console.log(fileButtons[0].id);     // returns filemanagement_uploadbutton[0]
console.log(fileButtons[0].type);   // returns button
console.log(fileButtons[0].click);  // returns javascript:uploadFiles();
fileButtons[0].click();

I've also tried:

let fileButton = document.getElementsByName('filemanagement_uploadbutton')[0];
fileButton.click();

Both of these result in the error:

Uncaught TypeError: fileButtons[0].click is not a function

or

Uncaught TypeError: fileButton.click is not a function

How is it telling me that click is not a function on the element that it's telling me the click function is javascript:uploadFiles(); literally one element above?

Edit: I've also tried these variations:

let fileButtons = document.getElementsByName('filemanagement_uploadbutton')[0];   //obviously the command for fileButtons[0].length won't work here as expected, so I comment it out
let fileButton = document.getElementById('filemanagement_uploadbutton[0]');

with the appropriate changes to the code below when I reference them.

• javascript

Share Improve this question Follow edited Nov 18, 2024 at 19:06 Steve G. asked Nov 18, 2024 at 17:46 Steve G.Steve G. 40922 gold badges1010 silver badges2424 bronze badges 8

• The first error I'm getting is Uncaught ReferenceError: uploadFiles is not defined from onclick="javascript:uploadFiles();". Post a minimal reproducible example please – j08691 Commented Nov 18, 2024 at 17:54
• FYI there's no need for javascript: in onXXX attributes. That's only needed when putting JavaScript in href – Barmar Commented Nov 18, 2024 at 18:05
• 1 Can't reproduce: jsfiddle/barmar/wk6qrho9 – Barmar Commented Nov 18, 2024 at 18:07
• I think the specific problem of your code is that .getElementsByName() return a NodeList (in most user agents, except IE and Edge), which is an array of nodes (not elements). And nodes don't have .click() functions... Then, you should access fileButtons[0].nodeValue.click(). – KLASANGUI Commented Nov 18, 2024 at 18:26
• @KLASANGUI That's not how nodeValue works. See developer.mozilla./en-US/docs/Web/API/Node/nodeValue – Barmar Commented Nov 18, 2024 at 18:36

 |  Show 3 more comments

2 Answers 2

Sorted by: Reset to default 0

Instead of using the inline HTML "onclick" function, you could try removing it and using an event listener in your JavaScript instead.

let fileButtons = document.getElementByName('filemanagement_uploadbutton');

if (fileButtons.length > 0) {
fileButtons[0].addEventListener('click', uploadFiles);
fileButtons[0].click();
}

You are need to have your code something like this.

First you need get the element by id using document.getElementById('filemanagement_uploadbutton[0]')

and then add the add event listener.

addEventListener('click', () => {
    // your code goes here
});

document.getElementById('filemanagement_uploadbutton[0]').addEventListener('click', () => {
    alert('hi');
});

<button id="filemanagement_uploadbutton[0]" name="filemanagement_uploadbutton">Upload</button>