Question

I know how to put javascript in an element directly, like:

<div onclick="this.style.opacity='0'">Some Text</div>

Or

<div onmouseover="this.style.opacity='0'">Some Text</div>

etc.

But Instead of using javascript in the element tag how can we provide the same action by putting the js code in <script> tag.

Answer 1

Using jquery, you could do

<div class="shouldchangeonclick">Some Text </div>
<script type="text/javascript">
$(document).ready(function() {
  $('.shouldchangeonclick').on('click', function () {
    this.style.opacity = '0';
    // or $(this).css('opacity', '0');
  });
});
</script>

Of course you could also do it without jquery, but don’t forget that the code should be called after the dom is ready (document onload event)

document.getElementById('theid').addEventListener('click', function (el) {
  this.style.opacity = '0';
});