How can I update a status message after a user action without losing the control?

Give the button and the changing message separate jobs: keep the button as the control that receives the click, and put the status in another element. Attach the event listener to the button, then update the separate element from the handler. MDN documents an event listener changing the text of a different element. [S1]

For example, the page structure can be:

<button id="saveButton" type="button">Save</button>
<p id="status">Not saved yet.</p>

The button remains the event target, while the paragraph is where the status text appears.

Select both elements, register the click listener on the button, and set the status element’s text in the handler:

const button = document.querySelector("#saveButton");
const status = document.querySelector("#status");

button.addEventListener("click", () => {
  status.textContent = "Saved.";
});

addEventListener() registers the listener on the button, and textContent sets text on the separate status element. [S1] [S2] The code updates the message; it does not replace the button. Avoid targeting the button for the status update if you want its original label to stay in place.

Trace the two targets separately. Identify which element receives the user’s click, then check that the listener is registered on that control. Next, identify which element displays the status and check that the handler updates that element’s text. If the status update targets the control itself, point it to the separate message element instead.

You can describe the intended pattern as: “When #saveButton receives a click, set #status to Saved.” That makes it easier to notice if a selector points to the wrong element. The example demonstrates the browser DOM pattern, but these references do not diagnose a particular page or establish how a UI framework handles rendering. [S1] [S2]

Here is a starting pattern. It assumes the elements exist in the page when this JavaScript runs:

<button id="actionButton" type="button">Action</button>
<p id="actionStatus">Ready.</p>

const control = document.querySelector("#actionButton");
const status = document.querySelector("#actionStatus");

control.addEventListener("click", () => {
  status.textContent = "Action complete.";
});

The key distinction is that the listener is attached to the control, while textContent changes the separate message element. [S1] [S2] Before using the pattern, check that both selectors match the intended elements and that the JavaScript runs after those elements are available. If you are using a UI framework, follow its own update pattern rather than assuming this browser DOM example applies unchanged.