Changing text of an html button by click on it

Question

I have an html button, like this:

<button onclick="func()" id="accountDetails" runat="server"</button>

I already spent a lot of time scratching my head to find out how to change the button's text by click on it, I put the following func() that execute the onclick event (html):

<script type="text/javascript">
    function func() {
        document.getElementById('accountDetails').textContent = 'server';
    }
</script>

but the result is that the text on the button is changed just for a second, (i mean just when i click the button) and after that the old text is again shown on the button.

The default `type` for a button is `submit`. When a submit button is pressed, the page will be refreshed. You need to prevent this from happening. See here: https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms — Turnip, Jul 18 '18 at 16:18

score 1 · Accepted Answer · answered Jul 18 '18 at 16:26

You can follow this html and script.

use input instead of button.

 <input onclick="func()" id="accountDetails" type="button" value="click"></input>

instead of

<button onclick="func()" id="accountDetails" runat="server"</button>

Then the document.getElementById('accountDetails') need to set value instead of textContent

function func() {
    document.getElementById('accountDetails').value  = 'server';
}

<input onclick="func()" id="accountDetails" type="button" value="click"></input>

Changing text of an html button by click on it

1 Answers1