Test Page

				
					<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("#calculate-btn").forEach((btn) => {
    btn.addEventListener("click", function () {
      // Get parent form to determine which tank we're in
      const form = btn.closest("form");
      const parentView = btn.closest(".tank-calculator-wrapper");

      const unit = form.querySelector("#measurement-units").value;
      const diameter = parseFloat(form.querySelector("#diameter")?.value || 0);
      const height = parseFloat(form.querySelector("#height")?.value || form.querySelector("#length")?.value || 0);
      const level = parseFloat(form.querySelector("#tank-level").value || 0);

      if (!diameter || !height) {
        alert("Please enter valid tank dimensions.");
        return;
      }

      // Volume in cubic mm
      const radius = diameter / 2;
      const tankVolume = Math.PI * radius ** 2 * height;
      const contentVolume = Math.PI * radius ** 2 * level;

      // Convert to other units
      const litres = tankVolume / 1e6;
      const litresContent = contentVolume / 1e6;

      const m3 = litres / 1000;
      const m3Content = litresContent / 1000;

      const ft3 = litres / 28.3168;
      const ft3Content = litresContent / 28.3168;

      const gallonsUk = litres / 4.54609;
      const gallonsUkContent = litresContent / 4.54609;

      const gallonsUs = litres / 3.78541;
      const gallonsUsContent = litresContent / 3.78541;

      const barrels = litres / 159;
      const barrelsContent = litresContent / 159;

      // Helper to update results
      function updateResult(type, cap, cont) {
        const row = parentView.querySelector(`tr[data-result="${type}"]`);
        if (row) {
          row.querySelector(".capacity .result").textContent = cap.toFixed(2);
          row.querySelector(".contents .result").textContent = cont.toFixed(2);
        }
      }

      updateResult("litres", litres, litresContent);
      updateResult("m3", m3, m3Content);
      updateResult("ft3", ft3, ft3Content);
      updateResult("gallonsUk", gallonsUk, gallonsUkContent);
      updateResult("gallonsUs", gallonsUs, gallonsUsContent);
      updateResult("barrels", barrels, barrelsContent);
    });
  });
});
</script>