Calling Javascript function from a href

Background information: When I press the Flag Property button, a module should pop up allowing me to send an email to a particular account alerting systems that this particular property should be flaged. There is another button, Email Property, that allows you to email the information regarding the property to anyone you want.

This is the code that I have associated with the buttons. As you can see both buttons will lead to the same javascript function. But I need them to point to two different functions. How do I do that?

<li><a href="javascript:;" class="btn btn-xs purple fire_the_modal" data-propid="'.$row_mem['propertyid'].'"><i class="fa fa-envelope"></i> Flag Property </a></li>

<li><a href="javascript:;" class="btn btn-xs purple fire_the_modal" data-propid="'.$row_mem['propertyid'].'"><i class="fa fa-envelope"></i> Email Property </a></li>

I wrote the script that actually executes in another file. This is the header I wrote for that

<script type="text/javascript">

Could I just associate let us the flag property with

<a href="javascript1:; and correspondingly   <script type="text/javascript1">

I am pretty new to javascript, so I am not sure if this is even right thing to do.

Solution

You define a function in your other script and then you call that function when your link is clicked. So you would put all the code you want to execute from that other script into a function. Then, include that script into your page with <script src="xxx.js"></script>. That will make the function be defined in the web page so it can be called.

There are several different ways to call that function from the link. You can either put javascript:myFunc() as the href or you can register a click handler for the link. Registering an event handler is the generally recommended way to handle a click on a link.

If you don't know how to set up a click handler for a link, here's an article about the basics: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers

So, your external script in xxx.js would look like this:

function myFunc() {
   // put your code here
}

Here's an example of a simple event handler:

function log(msg) {
  var div = document.createElement("div");
  div.textContent = msg;
  document.body.appendChild(div);
}


document.getElementById("myLink").addEventListener("click", function(e) {
  e.preventDefault();
  log("clicked");
});

<a href="#" id="myLink">Click Me</a>