JavaScript Calculator Not Rendering Properly When Embedded (Works Locally)

JavaScript
1

Hi everyone,

I’m embedding a custom-built calculator in my site [ irregular area calculator] into different websites using a small JavaScript snippet.

The calculator works perfectly when:

  • Opened directly on my website

  • Tested locally

  • Embedded in a simple HTML file

However, when I try embedding it into certain platforms (Google Sites, WordPress blocks, or some CMS builders), I’m facing issues like:

  • The calculator container loads but JS doesn’t initialize

  • Event listeners don’t fire

  • Sometimes calculations work, but dynamic result sections don’t toggle

  • In a few cases, the script is silently blocked

Here’s a simplified version of my structure:

Calculate

In some environments, inline JS seems restricted or partially sandboxed.

I’ve also tried:

  • Moving JS to an external file

  • Using DOMContentLoaded event listeners

  • Wrapping everything inside an IIFE

  • Removing inline onclick and using addEventListener

Still inconsistent results depending on where it’s embedded.

My questions:

  1. Are certain platforms blocking inline scripts by default?

  2. Is there a more embed-friendly approach I should be using? (iframe? modular loader?)

  3. Should I convert the calculator to a fully self-contained JS widget?

  4. Are there best practices for distributing embeddable calculators?

I’d appreciate guidance from anyone experienced with cross-platform JS embeds.

Thanks in advance!