Changing div background color on mouse-over with anonymous function calling from HTML code in Javascript

Question

I have got this code from the below link and I am new to Javascript. I want to know how to call the JavaScript function from the html code.

Because they are anonymous functions I am unable to call them. Could someone help me how to call those two function in the div?

Link : How to use JavaScript to change div backgroundColor

<div id="catestory">

  <div class="content">
    <h2>some title here</h2>
    <p>some content here</p>
  </div>

  <div class="content">
    <h2>some title here</h2>
    <p>some content here</p>
  </div>

  <div class="content">
    <h2>some title here</h2>
    <p>some content here</p>
  </div>

</div>

var div = document.getElementById('div_id');
div.onmouseover = function() {
  this.style.backgroundColor = 'green';
  var h2s = this.getElementsByTagName('h2');
  h2s[0].style.backgroundColor = 'blue';
};
div.onmouseout = function() {
  this.style.backgroundColor = 'transparent';
  var h2s = this.getElementsByTagName('h2');
  h2s[0].style.backgroundColor = 'transparent';
};

Answer 1

Basicly all you have to change is document.getElementById( 'div_id' ); to document.getElementById( 'catestory' );

but if you want all of them to have a seperated hover effect then try this:

var div = document.querySelectorAll('#catestory .content');
for (var i = 0; i < div.length; i++) {
  div[i].onmouseover = function() {
    this.style.backgroundColor = 'green';
    var h2s = this.getElementsByTagName('h2');
    h2s[0].style.backgroundColor = 'blue';
  }
  div[i].onmouseout = function() {
    this.style.backgroundColor = 'transparent';
    var h2s = this.getElementsByTagName('h2');
    h2s[0].style.backgroundColor = 'transparent';
  };
}

Demo

 var div = document.querySelectorAll('#catestory .content'); for (var i = 0; i < div.length; i++) { div[i].onmouseover = function() { this.style.backgroundColor = 'green'; var h2s = this.getElementsByTagName('h2'); h2s[0].style.backgroundColor = 'blue'; } div[i].onmouseout = function() { this.style.backgroundColor = 'transparent'; var h2s = this.getElementsByTagName('h2'); h2s[0].style.backgroundColor = 'transparent'; }; }

 <div id="catestory"> <div class="content"> <h2>some title here</h2> <p>some content here</p> </div> <div class="content"> <h2>some title here</h2> <p>some content here</p> </div> <div class="content"> <h2>some title here</h2> <p>some content here</p> </div> </div>

Answer 2

The sample code works. Only change div_id with id of your div.

You can bind js events to html elements directly like:

<div onmouseover="myFunction()"></div>

For Example (the following code means inside the event quotes waits function names or can works javascript) :

 <button onmouseover="this.innerHTML = Date()" onmouseout="this.innerHTML = 'The time is?'">The time is?</button>

Or firstly find the html element with selectors and bind functions to related event like your sample.

 var div = document.getElementById('catestory'); div.onmouseover = function() { this.style.backgroundColor = 'green'; var h2s = this.getElementsByTagName('h2'); h2s[0].style.backgroundColor = 'blue'; }; div.onmouseout = function() { this.style.backgroundColor = 'transparent'; var h2s = this.getElementsByTagName('h2'); h2s[0].style.backgroundColor = 'transparent'; };

 <div id="catestory"> <div class="content"> <h2>some title here</h2> <p>some content here</p> </div> <div class="content"> <h2>some title here</h2> <p>some content here</p> </div> <div class="content"> <h2>some title here</h2> <p>some content here</p> </div> </div>