Modifying the DOM will alter the current page's appearance.
When you click a submit button, it triggers the form submission process.
Upon submitting a form, a new page is fetched from the server, potentially identical to the previous one but without retaining any local changes made to the DOM.
Essentially, you're updating the current page only to discard those changes immediately and load a fresh version.
To achieve your desired outcome, consider the following options:
- Prevent form submission using JavaScript (commonly done by returning false in an onclick attribute, although addEventListener is now preferred over inline attributes). Alternatively, question the use of a submit button if unconditional prevention is necessary, favoring a regular button instead (yet maintaining progressive enhancement).
- Utilize the name/value of the submit button to prompt the server to generate a specific HTML document (e.g., with custom colors) rather than relying on JavaScript for this task.
- Save color change data locally (e.g., in a cookie or localStorage) so that JavaScript can retrieve it upon each page load and reapply the changes as needed.
In response to a comment:
Yes, I must submit a form and then adjust the background color afterward.
If that is the case, the first option may not suffice unless supplemented with Ajax functionality.
Opting for server-side modifications to implement the color change would likely be the least disruptive solution.