Random variable in key value pairs not interpreted as variable

Question

I have some values i am trying to store in local storage using key:value pairs. I want the key to be a random value from Math.random() but my value is not being seen as a variable

This is the fiddle

https://jsfiddle.net/ps4xs60x/27/

and the code

$(document).ready(function () {
 $(document).on('click', '.btn-primary', function(){
 var num = Math.random();
         $('.table tbody').append('<tr class="child"><td>one</td><td><button id="'+num+'" onClick="ae(this.id); function ae(clicked_id) {var items = []; var entry = {\'num\': clicked_id}; items.push(entry);localStorage.setItem(\'entry\',JSON.stringify(items));alert(localStorage.getItem(\'entry\',JSON.stringify(items)));}" type="button" class="invite ">Invite</button></td></tr>');
      });
});

How can i make num to be seen as a variable?

Why do you assume, num isnt seen as a variable? Your code works absolutely fine in that aspect. — Syntac, Oct 09 '16 at 05:58
Yes, but than you would have to write `'+num+'` instead of `\'num\'`. — Syntac, Oct 09 '16 at 06:02
Possible duplicate of http://stackoverflow.com/questions/2241875/how-to-create-an-object-property-from-a-variable-value-in-javascript — charlietfl, Oct 09 '16 at 06:02
Stop putting all that business logic into your html. Use jQuery event handlers to do it instead since you are using jQuery. Inline onClick is 1990's...this is 2016 — charlietfl, Oct 09 '16 at 06:04
@charlietfl I am not allowed jquery beyond the point i have used in the code, simply doesn't work. I am boxed into using `onClick`,nothing i can do. — Le Qs, Oct 09 '16 at 06:09
then put the business logic into functions that are maintainable — charlietfl, Oct 09 '16 at 06:11

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Disclaimer:

So localStorage doesn't work so much in these snippets but see the code below or this forked fiddle.

Code changes

Move the function ae() out of the onClick attribute and define it as a regular JS function.
Presuming you want to add each number clicked to the localStorage element entry array, then you need to parse that as json (if it is set) each time instead of making a new array.
Instead of using the onclick attribute, add a click handler for the elements with class name invite, just like you are doing for the elements with class name btn-primary...

function ae(event) {
  var items = JSON.parse(localStorage.getItem('entry'));
  if (items == null || typeof items !== 'object') {
      items = [];
  }
  var entry = {
    'num': event.target.id
  };
  items.push(entry);
  localStorage.setItem('entry', JSON.stringify(items));
  alert(localStorage.getItem('entry'));
}
$(document).ready(function() {
  $(document).on('click', '.invite', ae);
  $(document).on('click', '.btn-primary', function() {
    var num = Math.random();
    $('.table tbody').append('<tr class="child"><td>one</td><td><button id="' + num + '"type="button" class="invite ">Invite</button></td></tr>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody></tbody>
</table>

<button class="btn-primary">Add Row
</button>

Random variable in key value pairs not interpreted as variable

1 Answers1

Disclaimer:

Code changes