Javascript not working - Help

j2021c
Shopify Partner
4 0 0

I'm trying to add this calculator I've created and I can't seem to get the JS to work. I add it to theme.js and theme.liquid but can't seem to get it to work. This is the code: https://codepen.io/lab13/pen/JjyodLv

 

Any tips? 

 

Reply 1 (1)
OpenThinking
Shopify Partner
280 64 83

Hi there,
Jack from OpenThinking here!

You need to load jQuery in order for it to work.

Try this. Place the following code inside the *.liquid file of your choice.

<style>
@charset "UTF-8";*{box-sizing:border-box;}.irs-max,.irs-min{color:#fff!important;background-color:transparent!important}.finance-calculator{width:500px;background:#6b7885;border-radius:5px;padding:20px;border:1px solid #6b7885}h4.calculator{text-align:center;border-color:#fff}.form-line label{display:block;margin:0;text-align:left;font-weight:700;font-size:12px;color:#fff}.form-line input,.form-line select{width:100%;font-size:16px;padding:10px;margin-bottom:20px}.form-line input{display:block;border:1px solid #d9d9d9;border-radius:5px;color:#4d5a67}.form-line select{height:40px;text-align:center}.slider-value{font-weight:700}.range .sliderValue span{background-color:#ff9c99;border-top-color:#ff9c99;font-style:normal;position:absolute;text-align:center;width:70px;color:#000;font-weight:500;top:-28px;transform:translateX(-50%) scale(1);transform-origin:bottom;transition:transform .3s ease-in-out;line-height:23px;z-index:2}span.deposamount,span.loanamount{color:#fff}.range .sliderValue{position:relative;width:100%}.range .sliderValue span::before{transition:border-top-color .2s;position:absolute;bottom:-10px;left:calc(50% - 10px);content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid;border-top-color:#ff9c99}.range .sliderValue span::after{content:" Years"}.form-line-prefixed:before{content:"£";left:5px;bottom:12px}.form-line-prefixed1{padding-left:30px;position:relative;margin-bottom:10px}.fnticns,.form-line-prefixed:before{font-size:20px;position:absolute;color:#fff}.fnticns{top:9px;left:1px}.form-line-prefixed{padding-left:30px;position:relative;margin-bottom:20px}.irs-min{display:none}input[type=submit]{background:#ff9c99;color:#000;margin-top:10px;font-weight:700;text-transform:uppercase;font-size:16px;cursor:pointer;border:0}.apr_rate{text-align:center;color:#fff}.have_result{border-top:1px solid #d9d9d9;padding-top:20px}.result_line{text-align:center;color:#fff}.result_line h4{margin-bottom:10px;color:#fff}.result_line h4 em{display:block;font-size:.6em;font-style:light}.result_figure{font-size:28px;font-weight:700;color:#fff}.result_recalculate{margin-top:10px;border-top:1px solid #d9d9d9;padding-top:20px;text-align:center;text-transform:uppercase;cursor:pointer;color:#fff}@media screen and (max-width:600px){.finance-calculator{margin:50px auto;width:100%!important;background:#6b7885;border-radius:20px;padding:20px;border:1px solid #dedede}}.deposit_amount,.initial_cost{-webkit-appearance:none;width:100%;background:#d9e0e3;outline:0;opacity:1;-webkit-transition:.2s;transition:opacity .2s}.deposit_amount::-webkit-slider-thumb,.initial_cost::-webkit-slider-thumb,.total_months::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;background:#ff9c99;cursor:pointer}.total_months{margin-top:40px;-webkit-appearance:none;width:100%;background:#d9e0e3;outline:0;opacity:1;-webkit-transition:.2s;transition:opacity .2s}
</style>

<div class='finance-calculator'>
   <form>
      <div class='calc_area'>
         <div class='form-line form-line-prefixed'>
            <label for='initial_cost'>Loan Amount: <span class="loanamount"> </span></label> 
            <input value="900" id='initial_cost' name='initial_cost' class='initial_cost' type='range' min="900" max="10000" value="900" tabindex="3"> 
         </div>
         <div class='form-line form-line-prefixed'>
            <label for='deposit_amount'>Deposit Amount: <span class="deposamount"> </span></label>
            <input value="0" id='deposit_amount' name='deposit_amount' class='deposit_amount' type='range' min="10" max="90" value="90" tabindex="3"> 
         </div>
         <div class='form-line form-line-prefixed1'>
            <i class="fa fa-clock-o fnticns" aria-hidden="true"></i>
            <div class="range">
               <div class="sliderValue">
                  <span class="myspans" id="span1127254694131" style="left:2%;">1</span>
               </div>
               <input value="1" id='total_months' name='total_months' type='range' class='total_months' min="1" max ="3"> 
            </div>
         </div>
      </div>
      <!--end calc_area-->
      <div class='apr_rate'>APR <span id='apr'>9.9</span>%</div>
      <div class='form-line'>
         <input id='form_submit' type="submit" value="Calculate" />
      </div>
   </form>
   <div class='calc_result'></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"  crossorigin="anonymous"></script>
<script>
$(document).ready(function(){$(document).on("input","#initial_cost",function(){$(".loanamount").html("£ "+$(this).val())}),$(document).on("input","#deposit_amount",function(){$(".deposamount").html($(this).val()+"%")}),$(document).on("input","#total_months",function(){$(".myspans").html(""+$(this).val());var e=parseInt($(this).val())-1;e*=50,$(".myspans").css("left",e+"%")})});const submitBtn=document.querySelector("#form_submit"),resultArea=document.querySelector(".calc_result");function calculate(e){console.dir(e),e.target&&e.preventDefault();let t=document.querySelector("#initial_cost").value.replace(/\D/g,""),l=document.querySelector("#deposit_amount").value.replace(/\D/g,""),n=document.querySelector("#total_months").value.replace(/\D/g,"");t=Number(t),l=Number(l),n=Number(n),n*=12,t<(l=l*t/100)&&(alert("Deposit amount cannot be more than the vehicle price"),exit),console.log(`vehicle price = ${t}, deposit amount = ${l}, Payment Months = ${n}`);var a=9.9;n<=12&&(a=0);let o=(t-l)/100*a,s=n/12;console.log(o),console.log(s);let u=(t-l+o*s)/n;u=u.toFixed(2),console.log(u);let c=(t-l)/n;c=c.toFixed(2);let i=t+o*s;resultArea.classList.add("have_result"),resultArea.innerHTML=`<div class='result_line'><h4>Total Payable Per Month</h4><span class='result_figure'>£${u} for ${n} Months</span></div>`,resultArea.innerHTML+=`<div class='result_line'><h4>Total Amount to be Paid <em>(Including Deposit)</em></h4> <span class='result_figure'>£${i}</span></div>`,resultArea.innerHTML+=`<div class='result_line'><h4>Total Cost of Finance</h4><span class='result_figure'>£${i-t}</span></div>`,resultArea.innerHTML+="<div class='result_recalculate' onClick=\"calculate(this)\">Recalculate</div>"}submitBtn.addEventListener("click",calculate);
</script>




let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

⚡️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
⚡️ Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]