Change font color on mouseover

Question

I'm trying to change the color, when I mouseover elem1, but my code doesn't work..

let user1 = new user('Stan');
window.onload = function() {
  let elem1 = document.getElementById('u1');
  let getNum = document.getElementById("u1").value = "14";
  elem1.addEventListener("mouseover", highlight);

  function highlight() {
    document.getElementsById("u1").value = "14".style.color = "#00ff00";
    //alert(getNum); getNum check
  }

  function user(name) {
    this.name = name;
  }
};

.calCell {
  background-color: rgba(255, 228, 196, 0.1);
  font-family: JMH Arkham;
  font-size: 50px;
  color: khaki;
  text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
  width: 70px;
  height: 70px;
  border-color: rgba(176, 196, 222, 0.2);
}

<p id="u1">
  <script>
    (document.write(user1.name[0]);
  </script>
</p>
<tbody>
  <tr>
    <td><button class="calCell">01</button></td>
    <td><button class="calCell">14</button></td>
  </tr>
</tbody>

I will be happy if someone can help me to resolve this!

Answer 1

I use JQuery for resolve this. @Abhishek Mishra Thanks for idea!

//JQuery starts from here
$('#u1').mouseover(function(){
	$('.calCell:contains(11)').css('color', 'goldenrod');
});
$('#u1').mouseout(function(){
	$('.calCell').css('color', 'khaki');
});
//JQuery over here