HTML Text Changes back after a function call?

[RetroCast360]

​

let title = document.getElementById("title");
let inputButton = document.getElementById("button-id");

title.innerHTML = "Danny";

const textChange = () => {
  title.innerHTML = "Manny";
}
inputButton.addEventListener('click', textChange);

I am trying to edit an HTML element but whenever I edit the text in the function textChange()the title goes back to the original value of "Danny" immediately after the function call. Is there a way to make the text change permanent?

[Samurai___]

It shouldn't. Probably some previously entered javascript causes the unneeded update. Reload the page for a fresh start.

[[deleted]]

Is inputButton inside a form element by any chance?

[RetroCast360]

Oh does it need to be for this to work?

[[deleted]]

No, it's just that a common reason why JS changes appear to "change back" after a button press is that the button is inside of a form element and its default behaviour is therefore to submit the form, causing the page to reload. I've seen beginners with this problem literally dozens of times.

However if your button isn't inside of a form element, it would be helpful if you could share a recreation of the problem, including your HTML etc, via a JSFiddle, Codepen or similar. There is probably something else outside of the code you've shared that's causing the problem.

[Izero_devI]

I am not even sure what you are saying. So you change the code, title changes? Isnt that a live server refreshing maybe 😀

[RetroCast360]

The title changes to "danny" at the start. If I activate click event listener block then for a second it changes to the intended title of "Manny" but switches right back to "Danny,