Access Object by dynamic key undefined error

Question

I have a dictionary-like Object in Javascript and when I want to access to the dict by a key generated from page, the result is undefined :

How can I access the value correctly?

 var dict = { "red": "yes", "blue": "no" }; $("#trigger").click(function(){ alert(dict[$(this).text()]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="trigger"> blue </div> 

Answer 1

There are blank spaces in the text. Use trim() to remove them

 var dict = { "red": "yes", "blue": "no" }; $("#trigger").click(function() { alert(dict[$(this).text().trim()]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="trigger"> blue </div> 

Answer 2

It's because of extra spaces, use trim() to handle it

 var dict = { "red": "yes", "blue": "no" }; $("#trigger").click(function(){ alert(dict[$(this).text().trim()]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="trigger"> blue </div> 

Answer 3

its have some extra space. use with trim() . it will reduce the spaces

 var dict = { "red": "yes", "blue": "no" }; $("#trigger").click(function() { console.log(dict[$(this).text().trim()]) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="trigger">blue</div>