Javascript code added to individual shopify page does not work

Mckaylam
Visitor
3 0 0

I have a code that works externally on htmledit.squarefree.com 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>

  <style>

    table {

      border-collapse: collapse;

      width: 100%;

    }

    

    th, td {

      border: 1px solid black;

      padding: 8px;

      text-align: left;

    }

 

    th {

      background-color: #f2f2f2;

    }

  </style>

 

 

  <h2>Sheep Breeding Date Calculator</h2>

  <table>

    <tr>

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

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

    </tr>

    <tr>

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

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

    </tr>

    <tr>

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

      <td>

        <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>

        </select>

      </td>

    </tr>

    <tr>

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

    </tr>

  </table>

 

  <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 = `

        <h3>Results</h3>

        <table>

          <tr>

            <th>Desired Sale Date</th>

            <td>${saleDateValue}</td>

          </tr>

          <tr>

            <th>Desired Sale Weight</th>

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

          </tr>

          <tr>

            <th>Growth Rate</th>

            <td>${growthRateValue}</td>

          </tr>

          <tr>

            <th>Lambing Date</th>

            <td>${lambingDate.toDateString()}</td>

          </tr>

          <tr>

            <th>Breeding Date</th>

            <td>${breedingDate.toDateString()}</td>

          </tr>

        </table>

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

      `;

    }

 

    function printResults() {

      const printWindow = window.open('', '', 'width=600,height=400');

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

 

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

      printWindow.document.write(document.getElementById('resultsTable').innerHTML);

 

      printWindow.document.write('</body></html>');

      printWindow.document.close();

      printWindow.print();

    }

  </script></div>

 

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

Replies 0 (0)