Javascript Event How to - Get element by ID and add click event handler

Question

We would like to know how to get element by ID and add click event handler.

Answer


<!DOCTYPE html>
<html>
<head>
</head><!--  w w w.ja  va  2s  .  co  m-->
<body>
  <element id="foo"> abc. click me </element>
  <script type='text/javascript'>
    document.getElementById('foo').addEventListener('click', fn);
    function fn(){ 
       console.log(this.innerHTML); 
    }
    
    </script>
</body>
</html>

The code above is rendered as follows: