chained ifs, correct usage

1

I am creating a function that takes the values of a table that are in range, 1-49, 50-99, 100-199, ..., 300+, the code takes the value of an input and based on this value identifies the range and calculates the value of the product.

So far the code works fine, taking the value of the input, what happens is that when the value of the input is at 1000 it executes the 3rd if instead of the 5th, I believe it is some problem with the if chained, but I can not see. Someone help me? (ps pfv do not xinguem pq I wrote variables starting with capital letter)

        var Th1 = document.getElementById('th_1').innerHTML;
        var Th2 = document.getElementById('th_2').innerHTML;
        var Th3 = document.getElementById('th_3').innerHTML;
        var Th4 = document.getElementById('th_4').innerHTML;
        var Th5 = document.getElementById('th_5').innerHTML;

        var Vl1 = Th1.slice(0, Th1.indexOf("-"));
        var Vl2 = Th1.slice(Th1.indexOf("-") + 1);

        var Vl3 = Th2.slice(0, Th2.indexOf("-"));
        var Vl4 = Th2.slice(Th2.indexOf("-") + 1);

        var Vl5 = Th3.slice(0, Th3.indexOf("-"));
        var Vl6 = Th3.slice(Th3.indexOf("-") + 1);

        var Vl7 = Th4.slice(0, Th4.indexOf("-"));
        var Vl8 = Th4.slice(Th4.indexOf("-") + 1);

        var Vl9 = Th5.slice(0, Th5.indexOf("+"));
        var Vl10 = Th5.slice(Th5.indexOf("+") + 1);


        var q = Number(document.getElementById('pwrqto').value);
        var s = document.getElementById('xprice');

        //se o valor estiver no range 1
        if((q >= Vl1) && (q <= Vl2)){
            var cat =  document.getElementById('rs_0');
            var child = cat.childNodes[0].innerHTML;
            var cleanCp = child.slice(child.indexOf(";") + 1);

            s.innerHTML = 'R$ ' + Math.ceil(cleanCp.replace(",", ".") * q) + ',00';
        }
        //se o valor estiver no range 2
        if((q >= Vl3) && (q <= Vl4)){
            var cat =  document.getElementById('rs_1');
            var child = cat.childNodes[0].innerHTML;
            var cleanCp = child.slice(child.indexOf(";") + 1);

            s.innerHTML = 'R$ ' + Math.ceil(cleanCp.replace(",", ".") * q) + ',00';
        }
        //se o valor estiver no range 3
        if((q >= Vl5) && (q <= Vl6)){
            var cat =  document.getElementById('rs_2');
            var child = cat.childNodes[0].innerHTML;
            var cleanCp = child.slice(child.indexOf(";") + 1);

            s.innerHTML = 'R$ ' + Math.ceil(cleanCp.replace(",", ".") * q) + ',00';
        }
        //se o valor estiver no range 4
        if((q >= Vl7) && (q <= Vl8)){
            var cat =  document.getElementById('rs_3');
            var child = cat.childNodes[0].innerHTML;
            var cleanCp = child.slice(child.indexOf(";") + 1);

            s.innerHTML = 'R$ ' + Math.ceil(cleanCp.replace(",", ".") * q) + ',00';
        }
        //se o valor estiver no range 5
        if(q >= Vl9) {
            var cat =  document.getElementById('rs_4');
            var child = cat.childNodes[0].innerHTML;
            var cleanCp = child.slice(child.indexOf(";") + 1);

            s.innerHTML = 'R$ ' + Math.ceil(cleanCp.replace(",", ".") * q) + ',00';
        }

Below the HTML Code

<table><tbody>
  <tr class="wc_quantity">
     <th id="th_1">1-49</th>
     <th id="th_2">50-99</th>
     <th id="th_3">100-199</th>
     <th id="th_4">200-299</th>
     <th id="th_5">300+</th>
  </tr>
  <tr class="wc_price">
     <td align="center" id="rs_0"><span class="amount">R$&nbsp;10,00</span></td>
     <td align="center" id="rs_1"><span class="amount">R$&nbsp;9,50</span></td>
     <td align="center" id="rs_2"><span class="amount">R$&nbsp;9,30</span></td>
     <td align="center" id="rs_3"><span class="amount">R$&nbsp;9,20</span></td>
     <td align="center" id="rs_4"><span class="amount">R$&nbsp;9,10</span></td>
  </tr>

    
asked by anonymous 02.03.2017 / 13:17

1 answer

3

This is more suitable, more readable and faster.

switch (q)
{   
     //se o valor estiver no range 1
    case ((q >= Vl1) && (q <= Vl2)):
        ...
        break;

    //se o valor estiver no range 2
    case ((q >= Vl3) && (q <= Vl4)): 
        ...
        break;
    //se o valor estiver no range 3
    case ((q >= Vl5) && (q <= Vl6)):
        ... 
        break;
    //se o valor estiver no range 4
    case ((q >= Vl7) && (q <= Vl8)):
        ...
        break;
    //se o valor estiver no range 5
    default:
        ...  
 }
    
02.03.2017 / 13:40