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.
