Javascript code added to individual shopify page does not work

3 0 0

I have a code that works externally on as well as on my weebly website. I am trying to add it to my shopify web site. So I go to pages, I created a page just for this code. I click html and insert my code. Save my page and view it but the script is not working. I see the HTML form but otherwise it doesn't work.

The code:

<title>Sheep Breeding Date Calculator</title>


    table {

      border-collapse: collapse;

      width: 100%;



    th, td {

      border: 1px solid black;

      padding: 8px;

      text-align: left;



    th {

      background-color: #f2f2f2;





  <h2>Sheep Breeding Date Calculator</h2>



      <th><label for="saleDate">Desired Sale Date:</label></th>

      <td><input type="date" id="saleDate"></td>



      <th><label for="saleWeight">Desired Sale Weight (lbs):</label></th>

      <td><input type="number" id="saleWeight"></td>



      <th><label for="growthRate">Growth Rate:</label></th>


        <select id="growthRate">

          <option value="0.8">Fast (0.8 lbs per day)</option>

          <option value="0.5">Moderate (0.5 lbs per day)</option>

          <option value="0.3">Slow (0.3 lbs per day)</option>





      <td colspan="2"><button onclick="calculateBreedingDate()">Calculate</button></td>




  <div id="resultsTable"> <script>

    function calculateBreedingDate() {

      const saleDateInput = document.getElementById('saleDate');

      const saleWeightInput = document.getElementById('saleWeight');

      const growthRateSelect = document.getElementById('growthRate');


      const saleDateValue = saleDateInput.value;

      const saleWeightValue = saleWeightInput.value;

      const growthRateValue = growthRateSelect.options[growthRateSelect.selectedIndex].text;


      const saleDate = new Date(saleDateValue);

      const saleWeight = parseInt(saleWeightValue);

      const growthRate = parseFloat(growthRateSelect.value);


      const ageAtSale = saleWeight / growthRate;

      const lambingDate = new Date(saleDate.getTime() - (ageAtSale * 24 * 60 * 60 * 1000));

      const breedingDate = new Date(lambingDate.getTime() - (150 * 24 * 60 * 60 * 1000));


      const resultsTable = document.getElementById('resultsTable');

      resultsTable.innerHTML = `




            <th>Desired Sale Date</th>




            <th>Desired Sale Weight</th>

            <td>${saleWeightValue} lbs</td>



            <th>Growth Rate</th>




            <th>Lambing Date</th>




            <th>Breeding Date</th>




        <button onclick="printResults()">Print Results</button>




    function printResults() {

      const printWindow ='', '', 'width=600,height=400');

      printWindow.document.write('<html><head><title>Print Results</title></head><body>');


      printWindow.document.write('<h3>Calculated Results</h3>');









I have attached screen recordings of my code working on htmledit and it not working on my shopify site.

Replies 0 (0)