Documentation-based practice example; check the controls in your installed Oxygen version.
What it does and when to use it
Add browser behavior to content on the current page. This example focuses on one achievable outcome rather than listing every possible setting.
Before you start
Start with a test page and the data or assets described in the example. The values below are starting points, not universal design defaults.
Worked example: A calculator that updates on input
Scenario: A calculator that updates on input. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.
- Add labelled numeric inputs and a result region before writing the script.
- In Javascript Code, select those elements, listen for input changes and calculate only from validated numbers.
- Update the result as text and provide a useful error when values are missing; test zero and invalid input.
A minimal validated conversion
const field = document.querySelector('#size-px');
const result = document.querySelector('#size-result');
if (field && result) {
const update = () => {
const raw = field.value.trim();
const px = Number(raw);
result.textContent = raw !== '' && Number.isFinite(px) && px >= 0
? `${px / 16}rem`
: 'Enter a non-negative pixel value.';
};
field.addEventListener('input', update);
update();
}Create the labelled input size-px and result region size-result first. This example uses a fixed 16px root; the site’s full converter lets visitors choose the root size. Enter this without surrounding script tags in Oxygen Javascript Code.
Expected result
You should have a calculator that updates on input. Verify the result on the frontend using the same content or object described in the steps. A correct builder preview alone does not establish that links, data or interactions work for visitors.
Troubleshooting
If the script runs twice, check for duplicate code elements or listeners. Oxygen wraps this code in a DOMContentLoaded callback; do not add a second document-ready wrapper that can miss the event.
Checks before publishing
Oxygen wraps this code in a DOMContentLoaded callback. Handle missing elements and invalid inputs; do not put credentials in browser code.
- Compare desktop and narrow-screen layouts using actual content.
- Follow every destination and operate interactive controls with a keyboard where applicable.
- Check an empty or unavailable-data state when the element depends on a provider.
Official reference and version notes
Official Javascript Code reference provides the current provider information. This is independent, AI-assisted documentation on Benjamin Olsen’s website; examples are clearly identified as practice recipes.
The native references were checked against the site’s Oxygen 6.2.0-beta.9 installation and public documentation. Individual recipes should still be validated in your project.