JB Everett JB Everett - 6 months ago 7
HTML Question

Changing a div's output based off of another div's price

I have a page with some billing info. I want to affect a div based on the values of other divs. But, there is no output in my desired div.

Below is what I have so far:

$(document).ready(function () {
$(".content-wrapper.planwrapper").each(function() {
var originalRate = $(this).find(".v-ratePlanValue").text().replace("¢","");
var newBill = eval(originalRate*500+5.95);
});
$(this).find(".estimatedbill-wrapper .term-description").replace($(this),'$newBill');
});


I'm pretty new to JS, so any help would be appreciated!

Edit: Here is the HTML for one of the divs I'm working with -

<div class="esco_electric
">
<div class="esco_lower-wrapper">
<div class="esco_rates-list" id="electric_list">
<div class="rate-item row-id-Electric-' . $oneplan->ProductId . '-' . $oneplan->UtilityID . ' color3" data-product-id="' . $oneplan->ProductId . '" data-utility-id="' . $oneplan->UtilityID . '" data-tpv-id="' . $oneplan->TPVTemplateID . '" data-utility-name="' . $oneplan->UtilityShortName . '" data-zone="">
<!-- Price / Suffix / Plan Type -->

<div class="rate-type rate-wrapper">
<div class="rate-price" style="position:relative;">

<div class="mobleft" style="margin-bottom: 0px;">Fixed Rate</div>


<div id="pricediv-Electric-1853-50" class="price v-ratePlanValue mobcenter" style="padding-top:5px;">7.4<span style="font-size:0.7em;">¢</span></div>



<div class="price-suffix v-rateMeasurementSuffix mobright">
kWh </div>
</div>
</div>

<!-- Description Area -->
<div class="rate-description description-wrapper">
<!-- Upper Description -->
<div class="description-text">
<div class="term-title">Term</div>
<div class="term-description">
6 Months </div>
<div class="description-contentpricediv-Electric-1853-50 v-ratePlanDescription">

No Cancellation Fee </div>
</div>
</div>
<div class="rate-description estimatedbill-wrapper">
<div class="description-text">
<div class="estimatedbill-title">Estimated Bill</div>
<div class="term-description">
$148 </div>
<div class="v-ratePlanDescription howisthiscalculated" data-mfp-src="#howisthiscalculated-popover">
How is this calculated?
</div>
</div>
</div>

<style>
.description-contentpricediv-Electric-1853-50 {
margin-top: 19px;
text-align: center;
font-size: 16px !important;
color: #535353!important;
}
</style>

<!-- Action buttons -->

<a id="selectrateid-Electric-1853-50" href="index.php?type=resi&amp;s=options_and_information&amp;plan=1853&amp;StartDate=12-May-2016">
<div class="selectplan">
<p>Select Plan</p>
</div>
</a>


<a class="rate-edit" href="#">
<img src="images/check.png">
<p>
Edit&nbsp;Plan
</p>
</a>
</div> <!-- end rateitem -->

<div id="UDSDIVID-Electric-1853-50" data-alert="" class="alert-box radius infodiv"><div class="pdfdiv"><a eslinktext="Datos de la Electricidad" eslinkurl="PDFTemplates/ResidentialContracts/EFLViewer.php?lang=es&amp;key=RW5lcmd5Q2hhcmdlPTQuMSZQbGFuTmFtZT1UaGluayBTZWN1cmUgNiZJc3N1ZURhdGU9MDUvMTIvMjAxNiZVdGlsaXR5U2hvcnROYW1lPU9OQ09SJnByb2R1Y3R0ZXJtPTYmdGVybWZlZT0w" class="pdfcustom" href="PDFTemplates/ResidentialContracts/EFLViewer.php?key=RW5lcmd5Q2hhcmdlPTQuMSZQbGFuTmFtZT1UaGluayBTZWN1cmUgNiZJc3N1ZURhdGU9MDUvMTIvMjAxNiZVdGlsaXR5U2hvcnROYW1lPU9OQ09SJnByb2R1Y3R0ZXJtPTYmdGVybWZlZT0w" target="_blank" style="color:#000000;"><img src="images/pdf.png" height="25" width="25"> Electricity Facts Label</a><br><a eslinktext="Terminos y Condiciones" eslinkurl="PDFTemplates/TermsofServices/TOS_TX_Spanish.pdf?key=c3RhdGU9VFgmcmF0ZT00LjEmdGVybT02JnBsYW5uYW1lPVRoaW5rIFNlY3VyZSA2" class="pdfcustom" href="PDFTemplates/contract_api/index.php/contract/TC/state/TX/customer_type/RESI/service/Electric?PlanName=Think+Secure+6&amp;ContractNumber=TBD&amp;ServiceAddress=&amp;Price=4.1&amp;ServiceCity=&amp;ServiceAddress2=&amp;ServiceState=&amp;ServiceZipCode=&amp;Term=6&amp;MonthEnding=November&amp;Timestamp=1463061182 " target="_blank" style="color:#000000;"><img src="images/pdf.png" height="25" width="25"> Terms of Service</a><br><a eslinktext="Sus Derechos como Cliente" eslinkurl="PDFTemplates/Contracts/TX_YRAC_Spanish.pdf" class="pdfcustom" href="PDFTemplates/Contracts/TX_YRAC.pdf" target="_blank" style="color:#000000;"><img src="images/pdf.png" height="25" width="25"> Your Rights as a Customer</a><br><br>
</div><!-- end pdfdiv-->
<div class="textrightdiv">Please contact Customer Care to request that a written copy of the terms of service document be sent to you by regular U.S. mail.<br><br><span style="padding-right: 30px;">Email Request: </span><a href="mailto:customercare@mythinkenergy.com">customercare@mythinkenergy.com</a><br><span style="padding-right: 25px;">Phone Request: </span>1-888-238-5610<br><a class="small button spanishButton" name="btnshowspanish" id="btnshowspanish22422" onclick="showspanishcontracts('btnshowspanish22422');">Documentos en Español</a></div><a onclick="$('#UDSDIVID-Electric-1853-50').hide();" style="display: none; padding: 10px;color:#000000;cursor: pointer; cursor: hand;position: absolute;top: 10px; right: 10px;">X</a><div style="clear: both;"></div></div> </div>
</div>
</div>

Answer

Your logic is correct, while your code is incorrect, there are several mistakes that needs to be fixed:

  • There's no need to use eval, it has no effect in your code and it's better to avoid its use.

  • To use the variable newBill you don't need to write $newBill and if you put it inside '' it will be interpreted as string and simply printthe sentence$newBill`.

  • And in your case you declared the variable newBill inside .each function so it will be undefined outside this function scope so you can't use it outside of it, you need to declare it outside it.

  • And the use of $(".content-wrapper.planwrapper").each(function() { is unnecessary in your case and will break your code.

  • And You are using .replace() in the wrong place, to change the content of a div use .text(content) and not .replace().

This is how should be your code:

$(document).ready(function() {
  var newBill = 0;
    var originalRate = $(this).find(".v-ratePlanValue").text().replace("¢", "");
    newBill = parseFloat(originalRate) * 500 + 5.95;
  $(this).find(".estimatedbill-wrapper .term-description").text(newBill);
});

THis is a working DEMO:

$(document).ready(function() {
  var newBill = 0;
  var originalRate = $(this).find(".v-ratePlanValue").text().replace("¢", "");
  newBill = parseFloat(originalRate) * 500 + 5.95;
  $(this).find(".estimatedbill-wrapper .term-description").text(newBill);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="esco_electric
                   ">
  <div class="esco_lower-wrapper">
    <div class="esco_rates-list" id="electric_list">
      <div class="rate-item row-id-Electric-' . $oneplan->ProductId . '-' . $oneplan->UtilityID . ' color3" data-product-id="' . $oneplan->ProductId . '" data-utility-id="' . $oneplan->UtilityID . '" data-tpv-id="' . $oneplan->TPVTemplateID . '" data-utility-name="' . $oneplan->UtilityShortName . '"
      data-zone="">
        <!-- Price / Suffix / Plan Type -->

        <div class="rate-type rate-wrapper">
          <div class="rate-price" style="position:relative;">

            <div class="mobleft" style="margin-bottom: 0px;">Fixed Rate</div>


            <div id="pricediv-Electric-1853-50" class="price v-ratePlanValue mobcenter" style="padding-top:5px;">7.4<span style="font-size:0.7em;">¢</span>
            </div>



            <div class="price-suffix v-rateMeasurementSuffix mobright">
              kWh</div>
          </div>
        </div>

        <!-- Description Area -->
        <div class="rate-description description-wrapper">
          <!-- Upper Description -->
          <div class="description-text">
            <div class="term-title">Term</div>
            <div class="term-description">
              6 Months</div>
            <div class="description-contentpricediv-Electric-1853-50 v-ratePlanDescription">

              No Cancellation Fee</div>
          </div>
        </div>
        <div class="rate-description estimatedbill-wrapper">
          <div class="description-text">
            <div class="estimatedbill-title">Estimated Bill</div>
            <div class="term-description">
              $148</div>
            <div class="v-ratePlanDescription howisthiscalculated" data-mfp-src="#howisthiscalculated-popover">
              How is this calculated?
            </div>
          </div>
        </div>

        <style>
          .description-contentpricediv-Electric-1853-50 {
            margin-top: 19px;
            text-align: center;
            font-size: 16px !important;
            color: #535353!important;
          }
        </style>

        <!-- Action buttons -->

        <a id="selectrateid-Electric-1853-50" href="index.php?type=resi&amp;s=options_and_information&amp;plan=1853&amp;StartDate=12-May-2016">
          <div class="selectplan">
            <p>Select Plan</p>
          </div>
        </a>


        <a class="rate-edit" href="#">
          <img src="images/check.png">
          <p>
            Edit&nbsp;Plan
          </p>
        </a>
      </div>
      <!-- end rateitem -->

      <div id="UDSDIVID-Electric-1853-50" data-alert="" class="alert-box radius infodiv">
        <div class="pdfdiv">
          <a eslinktext="Datos de la Electricidad" eslinkurl="PDFTemplates/ResidentialContracts/EFLViewer.php?lang=es&amp;key=RW5lcmd5Q2hhcmdlPTQuMSZQbGFuTmFtZT1UaGluayBTZWN1cmUgNiZJc3N1ZURhdGU9MDUvMTIvMjAxNiZVdGlsaXR5U2hvcnROYW1lPU9OQ09SJnByb2R1Y3R0ZXJtPTYmdGVybWZlZT0w"
          class="pdfcustom" href="PDFTemplates/ResidentialContracts/EFLViewer.php?key=RW5lcmd5Q2hhcmdlPTQuMSZQbGFuTmFtZT1UaGluayBTZWN1cmUgNiZJc3N1ZURhdGU9MDUvMTIvMjAxNiZVdGlsaXR5U2hvcnROYW1lPU9OQ09SJnByb2R1Y3R0ZXJtPTYmdGVybWZlZT0w" target="_blank" style="color:#000000;">
            <img src="images/pdf.png" height="25" width="25">Electricity Facts Label</a>
          <br>
          <a eslinktext="Terminos y Condiciones" eslinkurl="PDFTemplates/TermsofServices/TOS_TX_Spanish.pdf?key=c3RhdGU9VFgmcmF0ZT00LjEmdGVybT02JnBsYW5uYW1lPVRoaW5rIFNlY3VyZSA2" class="pdfcustom" href="PDFTemplates/contract_api/index.php/contract/TC/state/TX/customer_type/RESI/service/Electric?PlanName=Think+Secure+6&amp;ContractNumber=TBD&amp;ServiceAddress=&amp;Price=4.1&amp;ServiceCity=&amp;ServiceAddress2=&amp;ServiceState=&amp;ServiceZipCode=&amp;Term=6&amp;MonthEnding=November&amp;Timestamp=1463061182 "
          target="_blank" style="color:#000000;">
            <img src="images/pdf.png" height="25" width="25">Terms of Service</a>
          <br>
          <a eslinktext="Sus Derechos como Cliente" eslinkurl="PDFTemplates/Contracts/TX_YRAC_Spanish.pdf" class="pdfcustom" href="PDFTemplates/Contracts/TX_YRAC.pdf" target="_blank" style="color:#000000;">
            <img src="images/pdf.png" height="25" width="25">Your Rights as a Customer</a>
          <br>
          <br>
        </div>
        <!-- end pdfdiv-->
        <div class="textrightdiv">Please contact Customer Care to request that a written copy of the terms of service document be sent to you by regular U.S. mail.
          <br>
          <br><span style="padding-right: 30px;">Email Request: </span><a href="mailto:customercare@mythinkenergy.com">customercare@mythinkenergy.com</a>
          <br><span style="padding-right: 25px;">Phone Request: </span>1-888-238-5610
          <br><a class="small button spanishButton" name="btnshowspanish" id="btnshowspanish22422" onclick="showspanishcontracts('btnshowspanish22422');">Documentos en Español</a>
        </div><a onclick="$('#UDSDIVID-Electric-1853-50').hide();" style="display: none; padding: 10px;color:#000000;cursor: pointer; cursor: hand;position: absolute;top: 10px; right: 10px;">X</a>
        <div style="clear: both;"></div>
      </div>
    </div>
  </div>
</div>