CODEWITHSUNDEEP
javascript
alessio scionti
alessio scionti

Reputation: 51

change color when the number goes down

I am trying to change the class name to an element when its value goes down

My view in the blade is a foreach

@foreach ($scaduti as $item )
    <tr>
       <td>{{$item->name}}</td>
       <td>{{$item->lotto}}</td>
       <td>{{carbon\Carbon::createFromFormat('Y-m-d', $item->data_di_scadenza)->format('d-m-Y')}}</td>
       <td>{{$item->sector->settore}}</td>
       <td>{{$item->sector->scaffale}}</td>
       <td id="changecolor">{{$item->sector->quantita_rimanente - $item->sector->quantita_bloccata}}</td>
       <td>{{$item->sector->quantita_bloccata}}</td>


    </tr>
 @endforeach

I want to add a class to the td with id "changecolor"

My script is:

var x = document.getElementById("changecolor").innerHTML;
var i;
for (i = 0; i < x.length; i++) {
    if(x[i] <= 20){
         document.getElementById('changecolor').className= 'changetored';
        }

}

The color is applied only to the first element of the foreach and ignoring all the others.

I want to apply it to all foreach results that respect the if

Sorry for my bad English.

Upvotes: 0

Views: 63

Answers (3)

Shreekesh Murkar
Shreekesh Murkar

Reputation: 605

document.getElementById will always give you a single element. Most of the time the first element that it finds.

Instead of giving each element same id give them same name like

<td name="changecolor">{{$item->sector->quantita_rimanente - $item->sector->quantita_bloccata}}</td>

then use : document.getElementsByName("changecolor")

This will give all the elements with name 'changecolor'.

You can loop through these elements and do the thing you want.

Your modified code will look something like this:

var x = document.getElementsByName("changecolor");
var i;

for (i = 0; i < x.length; i++) {
    if(x[i].innerHTML <= 20){
         x[i].className = "changetored";
        }

}

Upvotes: 0

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

The problem is, as many users said, on id univocity. How to easly solve that? Let's say you have an id on $item that is a progressive number from 0 to ...

In this case you could do something like:

@foreach ($scaduti as $item )
    <tr>
       <td>{{$item->name}}</td>
       <td>{{$item->lotto}}</td>
       <td>{{carbon\Carbon::createFromFormat('Y-m-d', $item->data_di_scadenza)->format('d-m-Y')}}</td>
       <td>{{$item->sector->settore}}</td>
       <td>{{$item->sector->scaffale}}</td>
       <td id="{{ $item->id }}">{{$item->sector->quantita_rimanente - $item->sector->quantita_bloccata}}</td>
       <td>{{$item->sector->quantita_bloccata}}</td>


    </tr>
 @endforeach

Then the script becames:

var i;
for (i = 0; i < length of scaduti; i++) {
    var x = document.getElementById(i).innerHTML;
    if(x[i] <= 20){
         document.getElementById(i).className= 'changetored';
    }

}

Upvotes: 1

Scott Jodoin
Scott Jodoin

Reputation: 183

This is happening because you are using the id attribute more than once. An id should only appear once on a page. There are a couple ways to solve this problem:

  1. change the id to a class='changecolor', then iterate through all of the elements with the changecolor class.

  2. loop through the s of the and change the color of the 6th

I would suggest looking up document.querySelector to help in this.

Upvotes: 0

Related Questions