How to Handle User Input with JavaScript
Div-idy will take care of the JavaScript creation. You just describe the inputs you want (forms, buttons, dropdowns) and what should happen when the user interacts with them.
Quick Answer
To handle user input with JavaScript in Div-idy, just tell the prompt what inputs you need and what the app should do when the user types, clicks, or submits. Div-idy generates the JavaScript (event listeners, validation, calculations, saving, and UI updates) automatically.
The clearer you are about “when X happens, do Y,” the better the JS logic will be on the first generation.
Common user input types
- Text inputs (name, email, search)
- Number inputs (amount, quantity, score)
- Dropdowns (category, status)
- Checkboxes / toggles (settings, preferences)
- Buttons (submit, calculate, add, delete)
- Forms (signup, contact, create record)
Example prompts you can copy
Add a text input and a button.
When the button is clicked, read the input value and display it below the button.
If the input is empty, show an error message.Build a contact form with name, email, and message.
Validate email format and require all fields.
On submit, show a success message and clear the form.Create a search input that filters a list in real time as the user types.
Show “No results” when nothing matches and highlight matching text.Create a simple calculator UI with two number inputs and a dropdown (add/subtract/multiply/divide).
When the user clicks Calculate, show the result and handle divide-by-zero gracefully.Prompt pattern that works well
Use this structure when prompting for user input logic:
Inputs:
- [list your fields]
When the user [action]:
- Do [result]
- Validate [rules]
- Show [success/error UI]
- Save to [local storage / database] (optional)If something doesn’t work
If the input behavior isn’t correct, just tell Div-idy what’s wrong and what you want instead:
Fix prompt example:
"There is a glitch: clicking the Submit button does nothing.
Add a click handler, validate the fields, and show a success message after submit.
Do not change the page design."If you see an error in the browser console, copy/paste it into your prompt. That helps the AI fix it faster.
Troubleshooting
- Nothing happens on click: Ask it to add an event listener for the button.
- Form refreshes the page: Ask it to prevent default form submit behavior.
- Invalid input causes weird output: Ask for validation (required fields, min/max ranges, email format).
- UI doesn’t update: Ask it to update the DOM and re-render results after the action.