Text is not changed with OnClientClick event

Question

I'm new to Javascript. I wrote a code, but it does not work as I wish. This is my code.

<script type="text/javascript">
    function changeText() {
        document.getElementById("demo").innerHTML = 'Hello JavaScript';
    }
</script>
<body>
<form id="form1" runat="server">
<div id="HelloJavaScript" style="height: 157px">

    <p id="demo">JavaScript can change the HTML content</p>

    <asp:Button ID="Button1" runat="server" Text="Click Me" OnClientClick="changeText()"/>

</div>
</form>

The text is not changed once I click the button. What's wrong with this? Thanks in advance.

Answer 1

It'll create postback

try like this

OnClientClick="changeText();return false;"

OR like this

JS

function changeText() {
    document.getElementById("demo").innerHTML = 'Hello JavaScript';
    return false;
}

Html

<asp:Button ID="Button1" runat="server" Text="Click Me" OnClientClick="return changeText();" />

N:B:

Using return in OnClientClick will prevent form going to server.

You have to handle return logically according to your business

Answer 2

<asp:Button ID="Button1" runat="server" Text="Click Me" onclick="changeText()"/>

使用onclick代替OnClientClick

Answer 3

        <p id="demo">JavaScript can change the HTML content</p>

        <button type="button" onClick="changeText()">Click Me!</button>

<script>
function changeText() {
    document.getElementById("demo").innerHTML = 'Hello JavaScript';}
</script>

Text is not changed with OnClientClick event

Question

3 answers

solution1
2 2015-11-26 05:15:43

solution2
1 2015-11-26 05:14:12

solution3
0 2015-11-26 05:49:40

Text is not changed with OnClientClick event

Question

3 answers

solution1 2 2015-11-26 05:15:43

solution2 1 2015-11-26 05:14:12

solution3 0 2015-11-26 05:49:40

solution1
2 2015-11-26 05:15:43

solution2
1 2015-11-26 05:14:12

solution3
0 2015-11-26 05:49:40