execute javascript code only when an element with specific id is clicked

Question

Is it possible to execute a block of javascript code when an element is clicked.

<a id="id-name" href="#">ABC</a>

I want to execute the following code only if above link is clicked

<script>
if(link-clicked){
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng( 12.1223, 123.324 ),
    map: map,
    title: Some Location
  });
}
</script>

Note: just pure javascript

Search bar at the top? Google Search? Duplicate questions are marked as duplicate to keep the site clear and not spammed. Your question would redirect to already answered question rather than having a million places with the same answers.. — Adrian, Aug 09 '18 at 11:36

score 0 · Answer 1 · answered Aug 09 '18 at 11:13

You can use the href attribute to specify what code in javascript to run (ie the function to run). If you wish to keep the href you can also use the onclick attribute:

<a href="#" onclick="myCode();">Click me</a>

Here is an example using the href attribute:

function myCode() {
  console.log("Run my js code");
}

<a href="javascript:myCode();">Click me</a>

score 0 · Answer 2 · answered Aug 09 '18 at 11:16

what you need is an event handler.

onchange=>An HTML element has been changed
onclick=>The user clicks an HTML element
onmouseover=>The user moves the mouse over an HTML element
onmouseout=>The user moves the mouse away from an HTML element
onkeydown=>The user pushes a keyboard key
onload=>The browser has finished loading the page

Using this type of event handler you can execute a block of javascript code when a specific event to a specific element occur.

EXAMPLE

function myFunction() {
    console.log(document.getElementById('d1').value);
}

<input type="number" id="d1" onclick="myFunction()">

score 0 · Answer 3 · answered Aug 09 '18 at 12:55

This is a good option...

<a id="id-name" href="#">ABC</a>

<script>
    var $link = document.getElementById('id-name');
    $link.addEventListener('click', getPosition);

    function getPosition () {
       var marker = new google.maps.Marker({
       position: new google.maps.LatLng( 12.1223, 123.324 ),
       map: map,
       title: Some Location
    }    
</script>

score -1 · Answer 4 · answered Aug 09 '18 at 11:16

-1

The onClick attribute is one option.

<a id="id-name" href="#" onClick="myFunction()">ABC</a>

answered Aug 09 '18 at 11:16

Ahorn

649
4
19

execute javascript code only when an element with specific id is clicked

4 Answers4