Ajuda com JavaScript

Rubens Parente · 1 de maio de 2015

Então... Eu estou usando esse primeiro html e script para uma calculadora em tempo real de preços, cada tier (bronze, prata, etc) tem 5 divisões.

Eu estou tentando criar um novo layout para essa calculadora, no lugar de dropdown estou usando imagens com radio inputs embutidos. O problema é que eu não sei NADA de javascript, esse código que estou usando foi uma adaptação que eu consegui fazer, mas ele é todo baseado no dropdown, agora que são radio inputs eu não sei como corrigir para funcionar.

O cálculo que ela precisa fazer é o seguinte:

Bronze: 5 divisões (vamos colocar um valor de preço 1). Então da Divisão 5 para a 1 custará 4, fica bem mais fácil de entender vendo na página: http://www.eloturbo.com/#tiers

Supondo então os preços, a cada tier o preço aumenta em 1.

Mas agora tem dois tiers que não se dividem em 5. Que são os dois últimos no HTML2

HTML1

 <center style="overflow: auto;">    <div id="main_content">    <div id="wrapper">    <table>     <tbody>    <tr><td><div class="current_tier_division">    <div class="current_tier_img" id="cti" style="background-image: url(http://s9.postimg.org/t65jquvb3/gold_4.png); height: 192px; width: 192px;">    </div>    </div>    </td>            <td><div class="desired_tier_division">    <div class="desired_tier_img" id="dti" style="background-image: url(http://s9.postimg.org/5k9xif2f3/platinum_1.png); height: 192px; width: 192px;">    </div>    </div>    </td></tr>    <tr><td><div class="current_tier">    <select id="ct">                <option value="b">Bronze                </option><option value="s">Prata                </option><option value="g">Ouro                </option><option value="p">Platina                </option><option value="d">Diamante              </option></select>    <select id="cd">                <option selected="">5                </option><option>4                </option><option>3                </option><option>2                </option><option>1              </option></select>            </div>    </td>        <td><div class="desired_tier">    <select id="dt">                <option value="b">Bronze                </option><option value="s">Prata                </option><option value="g">Ouro                </option><option value="p">Platina                </option><option value="d">Diamante              </option></select>          <select id="dd">                <option selected="">5                </option><option>4                </option><option>3                </option><option>2                </option><option>1              </option></select>            </div>    </td></tr>    </tbody></table>    </div>    </div>    <table><tbody>    <tr><form action="https://payment.com.br/security/webpagamentos/webpagto.aspx" method="post" target="payment">        <td><div class="howmuch" id="green" style="padding: 7px; width: auto;">    <span class="btn">VALOR</span>                <span class="btn btn-warning" id="price"></span></div>    </td>        <td><input name="email_cobranca" type="hidden" value="username@gmail.com" />                            <input name="tipo" type="hidden" value="CP" />                            <input name="moeda" type="hidden" value="BRL" />                            <input name="item_id_1" type="hidden" value="01" />                            <input id="descricaojob" name="item_descr_1" type="hidden" value="EloJobTurbo" />                            <input id="valorfinal" name="item_valor_1" type="hidden" value="" />                            <input name="item_frete_1" type="hidden" value="0" />                            <input name="item_peso_1" type="hidden" value="0" />                            <input name="item_quant_1" type="hidden" value="1" />                            <input class="btn btn-info" id="red" name="submit" style="padding: 12px;" type="submit" value="COMPRAR" /></td>                        </form></tr>    </tbody></table>

SCRIPT1

    <script type="text/javascript">    function EloEvolution(attrs) {       this._products = {        b5: {          id: 0,          price: 20,          image: 'http://s27.postimg.org/y1k8o34gz/bronze_5.png'        },        b4: {          id: 971,          price: 20,          image: 'http://s27.postimg.org/4l017x8pv/bronze_4.png'        },        b3: {          id: 972,          price: 20,          image: 'http://s27.postimg.org/h653p2yqr/bronze_3.png'        },        b2: {          id: 973,          price: 20,          image: 'http://s27.postimg.org/a0dcmmpnn/bronze_2.png'        },        b1: {          id: 974,          price: 20,          image: 'http://s27.postimg.org/vy9tgf4o3/bronze_1.png'        },        s5: {          id: 975,          price: 20,          image: 'http://s16.postimg.org/68f5dxh1h/silver_5.png'        },        s4: {          id: 976,          price: 25,          image: 'http://s16.postimg.org/65v9r3ddx/silver_4.png'        },        s3: {          id: 977,          price: 25,          image: 'http://s16.postimg.org/6mghdj151/silver_3.png'        },        s2: {          id: 978,          price: 25,          image: 'http://s16.postimg.org/58oui81vp/silver_2.png'        },        s1: {          id: 979,          price: 25,          image: 'http://s16.postimg.org/6757kif7p/silver_1.png'        },        g5: {          id: 980,          price: 25,          image: 'http://s16.postimg.org/5nvixhyf9/gold_5.png'        },        g4: {          id: 981,          price: 30,          image: 'http://s16.postimg.org/hsfds80p1/gold_4.png'        },        g3: {          id: 982,          price: 30,          image: 'http://s16.postimg.org/fp4ykk0w5/gold_3.png'        },        g2: {          id: 983,          price: 30,          image: 'http://s16.postimg.org/ptz0wdu2t/gold_2.png'        },        g1: {          id: 984,          price: 30,          image: 'http://s16.postimg.org/hr5fysyv9/gold_1.png'        },        p5: {          id: 985,          price: 30,          image: 'http://s27.postimg.org/sstt3ybfn/platinum_5.png'        },        p4: {          id: 986,          price: 50,          image: 'http://s27.postimg.org/w0yagzxpf/platinum_4.png'        },        p3: {          id: 987,          price: 50,          image: 'http://s27.postimg.org/rp9orzqsj/platinum_3.png'        },        p2: {          id: 989,          price: 50,          image: 'http://s27.postimg.org/61kqhjqeb/platinum_2.png'        },        p1: {          id: 990,          price: 50,          image: 'http://s27.postimg.org/td48swfab/platinum_1.png'        },        d5: {          id: 988,          price: 50,          image: 'http://s27.postimg.org/7f7rz409v/diamond_5.png'        },        d4: {          id: 1597,          price: 90,          image: 'http://s27.postimg.org/mldtq1qar/diamond_4.png'        },        d3: {          id: 1770,          price: 90,          image:'http://s27.postimg.org/n9mo8zp0j/diamond_3.png'        },        d2: {          id: 1771,          price: 90,          image: 'http://s27.postimg.org/ke9l24l0j/diamond_2.png'        },        d1: {          id: 1772,          price: 90,          image: 'http://s27.postimg.org/jm6x2xgtf/diamond_1.png'        }      };          this.currencyFormat = 'R$';      this.currencyDecimalSeparator = ',';          this._errorMessages = {        dest_lt_cur: "Elo menor que o atual"      }      this._sequence = [        'b5','b4', 'b3', 'b2', 'b1',        's5','s4', 's3', 's2', 's1',        'g5','g4', 'g3', 'g2', 'g1',        'p5','p4', 'p3', 'p2', 'p1',        'd5','d4', 'd3', 'd2', 'd1'      ];      this.errors = [];            // ============== PUBLIC METHODS ================          // Need to set these settings      // this.selectCurrentTier = attrs['selectCurrentTier'];      // this.selectCurrentDivision = attrs['selectCurrentDivision'];      // this.currentWrapImage = attrs['currentWrapImage'];      // this.selectDestinationTier = attrs['selectDestinationTier'];      // this.selectDestinationDivision = attrs['selectDestinationDivision'];      // this.destinationWrapImage = attrs['destinationWrapImage'];      // this.priceContainer = attrs['priceContainer'];      // this.addToCartButton = attrs['addToCartButton'];      // this.addToCartUrl = attrs['addToCartUrl'];          this.settings = function(attrs) {        for (var key in attrs) {          this[key] = attrs[key];        }        this._attachAddToCart();            return this;      }          this.change = function() {        this.ck = $(this.selectCurrentTier).val() + $(this.selectCurrentDivision).val();        this.dk = $(this.selectDestinationTier).val() + $(this.selectDestinationDivision).val();        this.current = this._products[this.ck];        this.destination = this._products[this.dk];            this.updateImage();        var price = this.sumValue();        $(this.priceContainer).text(this._formatCurrency(price));            $('#valorfinal').val(price+'00');            atual = this.ck;        destino = this.dk;            $('#descricaojob').val('EloJob - De ' +atual+ ' ate ' +destino);                    return this;      }          this.updateImage = function() {        $(this.currentWrapImage).css('background-image', 'url(' + this.current.image + ')');        $(this.destinationWrapImage).css('background-image', 'url(' + this.destination.image + ')');      }          this.sumValue = function() {        this._getSequence();        if(this.i_dest < this.i_cur) {          this._addError('dest_gt_cur');          return false;        }            var sum = 0;        this._execInSequence(function(p, k){          sum += p.price;        });        return sum;      }                  this.errorMessages = function () {        var trErrors = [];        for(var i = 0; i < this.errors.length; i++) {          var k = this.errors[i];          if(this._errorMessages[k]) {            trErrors.push(this._errorMessages[k]);          } else {            trErrors.push(k);          }          return trErrors;        }      }        // ============== PRIVATE METHODS ================      this._getSequence = function() {        for(var i = 0; i < this._sequence.length; i++) {          if(this.ck === this._sequence[i]) {            this.i_cur = i;          }          if(this.dk === this._sequence[i]) {            this.i_dest = i;          }        }      }          this._execInSequence = function(func) {        for(var i = this.i_cur + 1; i <= this.i_dest; i++) {          var p_key = this._sequence[i];          var product = this._products[p_key];          func(product, p_key);        }      }          this._formatCurrency = function(val) {        var o = [];        var decPart = new String(parseInt((val - parseInt(val)) * Math.pow(10, this._currencyDecimalQty)) || 0);        var intPart = new String(parseInt(val) || 0);        if (decPart < 10) {          decPart = "0" + decPart;        }            o.push(this.currencyFormat);        o.push(' ')        o.push(intPart);            o.push(this.currencyDecimalSeparator);        o.push(decPart);            return o.join('');      }          this._attachAddToCart = function() {        var evo = this;        jQuery(evo.addToCartButton).click(function(){          evo.addToCart();        });      }          this._addError = function(err) {        this.errors.push(err);      }          this.init = function(attrs) {        if(attrs) {          this.settings(attrs);        }      }      this.init(attrs);    }        $(function(){      var evo = new EloEvolution({        selectCurrentTier: '#ct',        selectCurrentDivision: '#cd',        selectDestinationTier: '#dt',        selectDestinationDivision: '#dd',        currentWrapImage: '#cti',        destinationWrapImage: '#dti',        priceContainer: '#price',        addToCartButton: '#cart',        addToCartUrl: '',        cartUrl: '/carrinho',        beforeAddToCart: function() {          jQuery('#loader').show();        }      }).change();      $('#ct,#cd,#dt,#dd').change(function(){        // we need to call inside an anonymous function        // because we use `this`, inside evo.change function,        // referring to evo instance, instead the dom object        // that was changed.        evo.change();      });    });    </script>

HTML2

 <div id="wrapper">    <h1>Current Division</h1>    <table><tbody><tr><td><div class="current_tier" id="ct">                <label><input type="radio" name="oldtier" value="b" "=""><img src="http://s27.postimg.org/vy9tgf4o3/bronze_1.png"></label>                <label><input type="radio" name="oldtier" value="s"><img src="http://s16.postimg.org/6757kif7p/silver_1.png"></label>                <label><input type="radio" name="oldtier" value="g"><img src="http://s16.postimg.org/hr5fysyv9/gold_1.png"></label>                <label><input type="radio" name="oldtier" value="p"><img src="http://s27.postimg.org/td48swfab/platinum_1.png"></label>                <label><input type="radio" name="oldtier" value="d"><img src="http://s27.postimg.org/jm6x2xgtf/diamond_1.png"></label>                <label><input type="radio" name="oldtier" value="m"><img src="http://s28.postimg.org/ng25tphbh/tier_master.png"></label>                <label><input type="radio" name="oldtier" value="c"><img src="http://s1.postimg.org/5v3ewye3j/tier_challenger.png"></label>    </div></td></tr>                    <tr><td><div id="cd" class="current_division" style="text-align: center;">                 <label><input type="radio" name="oldiv" value="5"><span class="position">V</span></label>                 <label><input type="radio" name="oldiv" value="4"><span class="position">IV</span></label>                 <label><input type="radio" name="oldiv" value="3"><span class="position">III</span></label>                 <label><input type="radio" name="oldiv" value="2"><span class="position">II</span></label>                 <label><input type="radio" name="oldiv" value="1"><span class="position">I</span></label>                </div></td></tr></tbody></table>    <br>    <br>    <br>    <h1>Desired Division</h1>    <table><tbody><tr><td><div class="desired_tier" id="dt">                <label><input type="radio" name="newtier" value="b"><img src="http://s27.postimg.org/vy9tgf4o3/bronze_1.png"></label>                <label><input type="radio" name="newtier" value="s"><img src="http://s16.postimg.org/6757kif7p/silver_1.png"></label>                <label><input type="radio" name="newtier" value="g"><img src="http://s16.postimg.org/hr5fysyv9/gold_1.png"></label>                <label><input type="radio" name="newtier" value="p"><img src="http://s27.postimg.org/td48swfab/platinum_1.png"></label>                <label><input type="radio" name="newtier" value="d"><img src="http://s27.postimg.org/jm6x2xgtf/diamond_1.png"></label>                <label><input type="radio" name="newtier" value="m"><img src="http://s28.postimg.org/ng25tphbh/tier_master.png"></label>                <label><input type="radio" name="newtier" value="c"><img src="http://s1.postimg.org/5v3ewye3j/tier_challenger.png"></label>    </div></td></tr>                    <tr><td><div class="desired_position" id="dd" style="text-align: center;">                <label><input type="radio" name="newdiv" value="5"><span class="position">V</span></label>                <label><input type="radio" name="newdiv" value="4"><span class="position">IV</span></label>                <label><input type="radio" name="newdiv" value="3"><span class="position">III</span></label>                <label><input type="radio" name="newdiv" value="2"><span class="position">II</span></label>                <label><input type="radio" name="newdiv" value="1"><span class="position">I</span></label>            </div></td></tr></tbody></table>    </div>    <table><tbody>    <tr><form action="https://payment.com.br/security/webpagamentos/webpagto.aspx" method="post" target="payment"></form>        <td><div class="howmuch" id="green" style="padding: 7px; width: auto;">    <span class="btn">PRICE</span>                <span class="btn btn-warning" id="price">R$ 0,00</span></div>    </td>        <td><input name="email_cobranca" type="hidden" value="username@gmail.com">                            <input name="tipo" type="hidden" value="CP">                            <input name="moeda" type="hidden" value="BRL">                            <input name="item_id_1" type="hidden" value="01">                            <input id="descricaojob" name="item_descr_1" type="hidden" value="EloJob - De b5 ate b5">                            <input id="valorfinal" name="item_valor_1" type="hidden" value="000">                            <input name="item_frete_1" type="hidden" value="0">                            <input name="item_peso_1" type="hidden" value="0">                            <input name="item_quant_1" type="hidden" value="1">                            <input class="btn btn-info" id="red" name="submit" style="padding: 12px;" type="submit" value="BUY"></td>                        </tr>    </tbody></table>

A segunda ficaria assim: http://leagueipsum.blogspot.com.br/p/welcome-2.html

Mas não está calculando os preços "/