onclick recognized, but onchange not

Question

I probably stared to long at it - problem is smilar to this.I added an event listener to a button, but only the onclick method fires something. I want to display the name of the selected file from an upload:

var ulButtons = document.getElementsByClassName("file-upload");
[...ulButtons].forEach(ulButton => {
  ulButton.addEventListener("click", function() {
    ulButton.value = null;
    console.log("this works")
  })
});


[...ulButtons].forEach(ulButton => {
  ulButton.addEventListener("change", function() {
    console.log("changed to:", this.value)
  })
});

<label for="{field.id_for_label}" class="file-upload btn btn-secondary">upload file</label>

I fail to see why clicking on the upload button always shows in the console, but selecting a file does not trigger the changed to: ....

`change` events are fired on `input` elements, not on their labels. (Or on buttons, although your "button" is in fact a label rather than a button.) — Robin Zigmond, Jan 03 '22 at 19:43

score 1 · Accepted Answer · answered Jan 03 '22 at 19:47

Your code would work if you inlcude input field with type file.

var ulButtons = document.getElementsByClassName("file-upload");
[...ulButtons].forEach(ulButton => {
  ulButton.addEventListener("click", function() {
    ulButton.value = null;
    console.log("this works")
  })
});


[...ulButtons].forEach(ulButton => {
  ulButton.addEventListener("change", function() {
    console.log("changed to:", this.value)
  })
});

<label for="{field.id_for_label}" class="file-upload btn btn-secondary">
  <input type="file">upload file</input></label>

onclick recognized, but onchange not

1 Answers1