Why is the file not saved by getElementById?

Question

JavaScript

This code

document.getElementsByTagName('a')[0].onclick = function() {                
  var csv = "A";
  var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
  this.href = csvData;
  this.target = '_blank';
  this.download = 'filename1.csv';
}

works, the file is saved, and this one

document.getElementById('btn').onclick = function() {                
  var csv = "BUTTON";
  var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
  this.href = csvData;
  this.target = '_blank';
  this.download = 'filename2.csv';
}

no.
Why?
FileSave

Answer 1

Take a closer look at the code. The script simply takes and sets the link href with csvData value. After that, the browser, not understanding the format, downloads it. Why the hell does a button have a href attribute?