How to pass varaiable in HTML functions through jquery

Question

this is my html code. group.participants is an array.

result +=`<button class="gsb-${group.id}" onclick="demo(${group.participants})">`+"DEMO"+`</button><br/>`;

this is my simple javascript code to display the array from the parameter

 function demo(participants){
            alert(participants);
        }

this shows me the error

Uncaught SyntaxError: Unexpected end of input

may I know what is the problem

Unexpected end of input is likely unrelated to the code you've provided, but can be easily tested by removing the php(?) parts, eg result +=`<button>DEMO</button><br/>`; to see if you still get the same error. If you don't then it will be caused by the content (actual values) of group.participants (or, less likely, group.id) — fdomn-m
– fdomn-m, Commented Mar 24, 2022 at 7:06

jeremy-denis · Accepted Answer · 2022-03-24 07:26:43Z

1

With Jquery you can use the following to pass data to a selector

$(`.gsb-${group.id}`).data(group.participants);

to recover it you just have to call data() method

$(`.gsb-${group.id}`).data();

Finally like each group have different participants, you will have to append first the group button before add the data to it

result.append(`<button class="gsb-${group.id}" onclick="demo(${group.id})">`+"DEMO"+`</button><br/>`);
$(`.gsb-${group.id}`).data(group.participants);

    function demo(groupId) {
       var participants = $(`.gsb-${groupId}`).data();
       console.log(participants);
    }


    var result = $('#result');
    var group = {
      id:1,
      participants:[
        {name:'test1'},
        {name:'test2'}
     ]
    }
    result.append(`<button class="gsb-${group.id}" onclick="demo(${group.id})">`+"DEMO"+`</button><br/>`);
    $(`.gsb-${group.id}`).data(group.participants);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result"></div>

edited Mar 24, 2022 at 7:26

answered Mar 24, 2022 at 6:53

jeremy-denis

6,8963 gold badges24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Venkat Cpr Over a year ago

yeah I'm using jqery and it's not working

DarkBee Over a year ago

Well, you cleary said that participants is an array, so you will need to expand your array first e.g. data-participants="${group.participants.join(',')}"

fdomn-m Over a year ago

If you're using jquery then use $(this).data("participants") - and use jquery event binding rathee than onclick - will save you a ton of headaches trying to get onclick= to work.

Collectives™ on Stack Overflow

How to pass varaiable in HTML functions through jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related