onclick event working on index.html, but not on main.js

Question

I have an onclick event in my index.html file as below:

<a onclick="startDraw('Point')" class="card-link" >Add Point</a>

It is only working on index.html file if I use

<script>
  function startDraw(point) {
    console.log(point)
  }
</script> 

tag.

However if trying to define it in main.js file it shows following error:

Uncaught ReferenceError: startDraw is not defined at HTMLButtonElement.onclick ((index):59:56)

Answer 1

Using unobtrusive event handlers, it worked. Thank you @RoryMcCrossan

I just converted

function startDraw(point) {
    console.log(point)
  }

To something like this

var startDraw = document.getElementsByClassName("card-link");

    for (var i = 0; i < startDraw.length; i++)
    {
      startDraw[i].addEventListener('click', function () {                        
        {           
          alert(this.getAttribute('data'));             
        }
    });
    }