Calling a script on a product page

Highlighted
New Member
2 0 0

I have created a Snippet to be included on my Product page that would allow the customer to enter Length and Width and get a Square Foot Calculation.

I can display the content, but seems no matter where or how I add the function to do the calculation, it does not work.

 

My latest attempt is below, all in the Snippet itself but when I run the page and click the button it errors out telling me that the function does not exist

NOTE: I realize the script does not have the proper calculation in it, just trying to get the script to fire first.

I had also tried adding this in the themes.js and calling it but also did not work.

<form id="CustomDim">
      
    <div class="row">
    <div class="desktop-3">
      <p class="option-label">Length Feet  </p>
        <div class="CustomDim">
          <input type="text"  id="LenFeet"> </div>
    </div>
      <div class="desktop-3">
      <p class="option-label">Length Inchess  </p>
        <div class="CustomDim">
          <input type="number" min=0 max =12 id="LenInch"> </div>
      </div>
    </div>
    <div class="row">
    <div class="desktop-3">
      <p class="option-label">Width Feet  </p>
        <div class="CustomDim">
          <input type="text"  id="WidFeet"> </div>
    </div>
      <div class="desktop-3">
      <p class="option-label">Width Inchess  </p>
        <div class="CustomDim">
          <input type="number" min=0 max=12 id="WidInch"> </div>
      </div>
    </div>
      <p><br></p>
    <label>Square Feet</label><input id="SqFeetTot" type="text" name="total" value=" ">
      
    <button type="button" style="margin-top:10px;" onclick="CalcCustomSquareFeet();">Calculate Sq. Feet</button>  
   
      <p><br></p>
     
</form>
 
 
<script>
  (function CalcCustomSquareFeet() { 
  var d=document;
  var input1 = d.getElementById("LenFeet");
  var total = parseFloat(input1);
  d.getElementById('SqFeetTot').value = total.toFixed(2);
})();
</script>
0 Likes