Output Calculation with Custom Code

Design help Custom code
1

Hi all, is there a way to display calculation (calculationResult) by styling with the built-in webflow css instead of a basic inner.html within the html embed?

<script>
        document.getElementById('calculate').addEventListener('click', function() {
            const perimeter = parseFloat(document.getElementById('perimeter').value);
            const height = parseFloat(document.getElementById('height').value);
            const rollWidths = document.getElementsByName('rollWidth');
            let selectedRollWidth;
            for (const rollWidth of rollWidths) {
                if (rollWidth.checked) {
                    selectedRollWidth = parseFloat(rollWidth.value);
                    break;
                }
            }

            const calculationResult = document.getElementById('calculationResult');
            calculationResult.innerHTML = '';

            if (!isNaN(perimeter) && !isNaN(height) && selectedRollWidth) 
            {
                const totalSquareFeet = perimeter * height;
                const rollCoverage = selectedRollWidth * 12; // Convert yards to feet
                const rollsNeeded = Math.ceil(totalSquareFeet / rollCoverage);

                calculationResult.innerHTML = `
                    <p class="text-lg">Calculation:</p>
                    <p>Total square feet: ${totalSquareFeet.toFixed(2)} sq ft</p>
                    <p>Roll size: ${selectedRollWidth} yards</p>
                    <p>Rolls needed: ${rollsNeeded}</p>
                `;
            } else {
                calculationResult.innerHTML = '<p class="text-lg text-red-500">Please enter valid numbers for all fields.</p>';
            }
        });
    </script>

Calculation

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Typically you’d create and style the elements in the designer exactly the way you like. Then your script will reference by ID and set the text for each.

3

Can you give me an example with the script I have?

4

Not without having a DOM to script against.
But you have most of the techniques there already.

You’ll probably use document.getElementById to locate the elements and then just set the content you want.