javascript - Object not printing/returning information to HTML(using jquery .hover())? -

i have following table in have 2 ids, mpoint , bpoint. want insert data here using html() when hover on elements id hydrogen or helium.

<div class="info" id="hydrogen">     <em>1</em>     h         <p>hydrogen</p> </div> <div class="info" id="helium">     <em>2</em>     li     <p>helium</p> </div>  <table class="proptable">     <tr>         <td>melting point</td>         <td id="mpoint"></td>     </tr>     <tr>         <td>boiling point</td>         <td id="bpoint"></td>            </tr> </table> 

here js function

function propelements() {     var prophydrogen = {          "m_point": "14.01",          "b_point": "20.28"     };     var prophelium = {          "m_point": "0",          "b_point": "4.22"     };      $('.info').hover(function() {         var getid = this.id;         var getpropname = "prop" + getid.charat(0).touppercase() + getid.slice(1);         console.log(getpropname);         $("#mpoint").html(getpropname.m_point + " k");         $("#bpoint").html(getpropname.b_point + " k");     }, function() {         $("#mpoint").html("unknown");         $("#bpoint").html("unknown");     }); } 

here 2 objects hydrogen , helium. getpropname change name of hovered element such becomes prop[hoveredelementid]. if hover on div #hydrogen, getpropname change name prophydrogen, name of object. , using html(), should print value of m_point , b_point @ position of specified ids.

but showing value of getpropname.m_point , getpropname.b_point unknown. have tried putting objects inside function still returns unknown though console returning exact propname should work. tried using innerhtml, returns undefined instead.

though, if use name directly(prophydrogen.m_point), prints value correctly. problem here?

the issue because cannot dynamically use value of variable point defined variable in manner attempting. better method use single object store information required , access properties of object dynamically. try this:

function propelements() {     var elements = {         hydrogen: {              "m_point": "14.01",              "b_point": "20.28"         },         helium: {              "m_point": "0",              "b_point": "4.22"         }     };      $('.info').hover(function() {         $("#mpoint").html(elements[this.id].m_point + " k");         $("#bpoint").html(elements[this.id].b_point + " k");     }, function() {         $("#mpoint").html("unknown");         $("#bpoint").html("unknown");     }); } 

working example

note making property names in object match id of .info elements saves lot of unnecessary string manipulation.