create own script function for each @foreach

Question

I want to style automatic generated table rows by clicking on a button.

At the moment my code looks like this:

@foreach($tours as $tour)
    <tr id="{{$tour->id}}">
        <td> {{$tour->tournr}} </td>
    
    <!-- ... -->

    <button onclick="myFunction()">Click me</button>
    
    <!-- ... -->

<script>
    function myFunction() {
      document.getElementById("{{$tour->id}}").style.color = "red";
    }
</script>

I cut little bit out like closing tags etc.

the button in general works, but the problem is, that always just the last row gets styled.

How can I relate the button to this special row.

I thank you in advance, kirschNN

Alberto · Accepted Answer · 2020-12-22 00:21:40Z

1

Well the easier way is probably:

take out the script from the foreach, otherwise you will end up with 2384728734 scripts
to pass $tour->id in the onclick

<script>
function myFunction(id) {
  document.getElementById(id).style.color = "red";
}
</script>
@foreach($tours as $tour)

 <tr id="{{$tour->id}}">
    <td> {{$tour->tournr}} </td>
       <button onclick="myFunction('{{$tour->id}}')">Click me</button>

Surely there are cleaner an more maintainable way to do this, but this works without a lot of changes

answered Dec 22, 2020 at 0:21

Alberto

13.1k3 gold badges31 silver badges72 bronze badges

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

2 Comments

kirschNN Over a year ago

i have an additional question. When i reload the site the colors are gone, is there a way to avoid this?

Alberto Over a year ago

@kirschNN there is no "easy" solution... maybe you can have a look at "local storage", and with a script updating the color when the page loads...

Collectives™ on Stack Overflow

create own script function for each @foreach

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related