Button Disappears On Click

I have a very simple HTML file (it's part of an MVC 4 project but i also tested on a plain HTML file) that contains two buttons and some jquery script:

Solution 1:

The problem is that you did not close your <p> tags properly. You did <p .... /> but it needs to be formatted like this <p ...></p>.

See: http://codepen.io/AlienHoboken/pen/kinGq

Solution 2:

You have to use a closing </p> tag. A self-closing tag won't work:

<buttonid="btn1">Get a string</button><br /><pid="p1"style="font-size: 12px"></p>  <-- here
<br /><buttonid="btn2">Get user agent</button><br /><pid="p2"style="font-size: 12px"></p> <-- and here

Solution 3:

use this: http://jsbin.com/eqawas/1/edit

<div><buttonid="btn1">Get a string</button><br /><pid="p1"style="font-size: 12px"></p><br /><buttonid="btn2">Get user agent</button><br /><pid="p2"style="font-size: 12px" ></p></div>

Solution 4:

default behaviour of "button" tag is submit. so you need to specify type="button" with like

<button id="btn1"type="button">Get a string</button>

and code onlod should be like

$(function () {
    $('#btn1').click(function () {
        $('#p1').text('clicked');
    });
    $('#btn2').click(function () {
        $('#p2').text(navigator.userAgent);
    });
});