javascript - Accessing an object with stored values for css background image, based on td element .text() value -

i have checked other answers found nothing alike. not sure approach feasible.

i have crud app, php , sql code works fine. on user input gets food values queried food.

the foods name placed in td element.

what want add background image based on jquery value of td elements .text() method.

this html, it's generated server side:

             <tr>                 <th>#</th>                 <th>food name</th>                 <th>calories/100g</th>                 <th>proteins</th>                 <th>carbohydrates</th>                 <th>fats</th>                 <th>time_to_burn_by_running</th>             </tr> 

i current value of td element this:

var currentfood = $('td:eq( 1 )').text(); //cache alert(currentfood); // test it, works fine 

i store background images in object:

var imgsources = {   almond: "https://www.vigon.com/wp-content/uploads/2015/04/almonds.jpg", banana: "https://www.organicfacts.net/wp-content/uploads/2013/05/banana3- 1020x765.jpg",  cereal: "http://nutryvidasaude.com.br/imagens/produtos/240420170917331.jpg",   }; 

now, if evaluation every food choice , hard code in function, no , against every dry principle out there.

here try instead, not sure if it's ok concatenate things this.

$(function(){ if(jquery){ /* alert("i here"); */ }  if($('table').length == 0) { alert("table not generated yet"); } else { $('table').prop('id', 'maintable'); var reso = $('#maintable').attr('id')  alert("table id "+ reso);  // relevant part var currentfood = $('td:eq( 1 )').text(); alert(currentfood);  alert(imgsources.cereal); // testing returned.  if($('table').length > 0) { $('#maintable').fadeout(100, function() { $('#maintable').fadein(2000);  // 1 not work $('#maintable').css('background-image', 'imgsources + "." +  currentfood').fadein(3000); });}    } }); 

no error message in console. concatenation issue? if :

$('#maintable').css('background-image', 'someurl').fadein(3000); 

then works.

i running on server, hope enough without fiddle/codepen

the issue because imgsources variable, cannot include in string - need concatenate it, along property you're trying access.

you'll need use bracket notation access object have stored property name in currentfood variable. try this:

var imgsources = {    almond: "https://www.vigon.com/wp-content/uploads/2015/04/almonds.jpg",    banana: "https://www.organicfacts.net/wp-content/uploads/2013/05/banana3-1020x765.jpg",     cereal: "http://nutryvidasaude.com.br/imagens/produtos/240420170917331.jpg",  };    var currentfood = $('#maintable td:eq(1)').text();  $('#maintable').css('background-image', 'url(' + imgsources[currentfood] + ')').fadein(3000)

#maintable {    height: 300px;  } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table id="maintable">    <thead>      <tr>        <th>#</th>        <th>food name</th>        <th>calories/100g</th>        <th>proteins</th>        <th>carbohydrates</th>        <th>fats</th>        <th>time_to_burn_by_running</th>      </tr>    </thead>    <tbody>      <tr>        <td>1</td>        <td>almond</td>        <td>550</td>        <td>18</td>        <td>14</td>        <td>48</td>        <td>55 </td>      </tr>    </tbody>  </table>