how do i use blade in javascript

@nikankad if you use it in blade and the ID is attached then use this instead:

$("#{{$users->id}}").click(function() {
    var id = $(this).attr('id');
}); 

I assume that {{$user->id}} does work in your selector.

what do you mean selector? it works in the html if thats what you mean

@nikankad no I mean here: $("#{{$users->id}}") if you inspect elements in your browser make sure that the click is caught:

$("#{{$users->id}}").click(function() {

    var id = $(this).attr('id');

    console.log('testing', id);
}); 

Check if your console when you click on the element prints, testing and the id.

it says the variable is undefined even though i used it multiple times in the html, i think its because its a php variable

my error message:

Undefined variable: pastpaper (View: /home/user/resources/views/pages/pastpapers/igcse.blade.php)

@nikankad but this error has nothing to do with the code that you have shown me above..

Where do you use $pastpaper ?

this is my full code the user thing was just an example

    @if (count($pastpapers) > 0)
                                
                                @foreach ($pastpapers as $pastpaper)
                                    <tr>  

                                        
                                            <td class="column1"> {{$pastpaper->Code}} </td>
                                            <td class="column2">{{$pastpaper->Subject}}</td>
                                            <td class="column3">{{$pastpaper->Paper}}</td>
                                            <td class="column4 ">{{$pastpaper->Season}}</td>
                                            <td class="column5"> {{$pastpaper->Zone}} </td>
                                            <td class="column6"><div class="buttons"><button id="{{$pastpaper->id}}" class="btn btn-danger" href="">Question</button></div></td>
                                            <td class="column7"><div class="buttons"><button class="btn btn-danger" href="#">Answer</button></div></td>

                                    </tr>
                                @endforeach
                                {{-- {{$pastpapers->links()}} --}}
                                @endif
                            </tbody>
                        </table>
                    {{-- <form method="POST">
                            <select style="width:5%;" class="form-control" id="pagination">
                                <option value="1" @if($items == 1) selected @endif >1</option>
                                <option value="2" @if($items == 2) selected @endif >2</option>
                                <option value="3" @if($items == 3) selected @endif >3</option>
                            </select>
                    </form> --}}
                </div>
            </div>
        </div>
    </div>
    </body>
    <div id="dropDownSelect1"></div>

<!--===============================================================================================-->
    <script src="{{asset('public/vendor/jquery/jquery-3.2.1.min.js')}}"></script>
<!--===============================================================================================-->
    <script src="{{asset('public/vendor/animsition/js/animsition.min.js')}}"></script>
<!--===============================================================================================-->
    <script src="{{asset('public/vendor/bootstrap/js/popper.js')}}"></script>
    <script src="{{asset('public/vendor/bootstrap/js/bootstrap.min.js')}}"></script>
<!--===============================================================================================-->
    <script src="{{asset('public/vendor/select2/select2.min.js')}}"></script>
    <script>
    $(document).ready(function() {

        $(".selection-2").select2({
            minimumResultsForSearch: 20,
            dropdownParent: $('#dropDownSelect1')
        });
        var x = 1;
        $("#1").click(function() {
        //  var id = $(this).attr('id');
         console.log('testing', id);

        });

    });
    
    </script>
<!--===============================================================================================-->
    <script src="{{asset('public/vendor/daterangepicker/moment.min.js')}}"></script>
    <script src="{{asset('public/vendor/daterangepicker/daterangepicker.js')}}"></script>
<!--===============================================================================================-->
    <script src="{{asset('public/vendor/countdowntime/countdowntime.js')}}"></script>
<!--===============================================================================================-->
    <script src="{{asset('public/js/main.js')}}"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-23581568-13');
   document.getElementById('pagination').onchange = function() {
    window.location = "{{ $pastpapers->url(1) }}&items=" + this.value;
};
</script>

</body>
</html>

you can visit my website https://www.tuition-mate.com/pastpapers/igcse and see what i mean, i want to click the question button where it woulld pass the id of the button to my controller. when you want to filter, filter only additional mathematics or accounting i have not added the rest to my database

@nikankad you have multiple errors on the site, when changing from the dropdown, the function used is not defined. Then here:

$("#1").click(function() {
        //  var id = $(this).attr('id');
         console.log('testing', id);

        });

The id is commented so it will be undefined. And the error is in igcse.blade.php file, don't know if this is it, but you are using it in the loop, if you use that variable somewhere out of the loop, then it will throw that error otherwise it is a local variable.

so how do i use the variable outside of the loop?

its working now! thank you for your help

@nikankad consider marking a "Best Answer" if it helped you :)

Have fun coding :)

hey just a quick follow up question, i am making one for the other button and its not working

//Question button
 $("#Q{{$pastpaper->id}}").click(function() {

        var id = $(this).attr('id');

        console.log('testing', id);
    });

   //answer button
    $("#A{{$pastpaper->id}}").click(function() {

        var id = $(this).attr('id');

        console.log('testing', id);
    });

@nikankad but you are using this {{$pastpaper->id}} out of a loop, right? And now you get the undefined variable I guess..

You can add a class to the element you are clicking, and a data attribute.. for example:

<tr class="pastpaper-row" data-id="{{ $pastpaper->id}}"> 

Then in your javascript get the data id like this:

$(".pastpaper-row").click(function() {
    var id = $(this).data('id');

    console.log('testing', id);
});

it works, what i meant was when i used it for another button, it works for the first one but for the new one it does not output anything to the console

 $("#Q{{$pastpaper->id}}").click(function() {

        var id = $(this).attr('id');

        console.log('testing', id);
    });

    $("#A{{$pastpaper->id}}").click(function() {

        var id = $(this).attr('id');

        console.log('testing', id);
    });

@nikankad it depends, it won't work with an ID for example if the new element has the same ID, as ID is unique per page and it can be attached to only one element.

Another thing is that if the other button is dynamically displayed on the page, this script is only run when the page first loads, so if the new button appears after the page load you will have to manually attach the click event. That's why I think a class is the best option.

The ids are different, the answer button has a prefix A and the Question button has prefix Q

@nikankad As I said, if the answers for the questions are dynamically added to the page, the event listener have to be manually attached it won't be added on the first page load if the element does not exists on the page before the script is loaded.

How do I do that?

Here is a good post, or at least a title on what you should be looking for

https://dev.to/trilemaestro92/how-to-add-event-listener-to-dynamically-added-elements--1iea