This tutorial will help to understand the basic behavior about button element. Button is a form element
and hence button can do things happen when we use it in it's natural environment i.e. the form.
To use button without form we will have to use JavaScript to display some interactivity in the page.
A button element has a default behavior that of submit hence when we use button it refreshes the
page. Hence to avoid the default behavior we use preventDefault function in JavaScript.
For example:
Let us write a code in which we will open a new widow on click of button and close the window on click of a button and also check if the window is open or close.
Case 1: Here we will use buttons without form to open a new window and close it. Here we need not to prevent the default behavior of a button, as the button's default behavior will not work without a form.
<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin(){
myWindow = window.open("","", "width=500,height=250");
}
function closeWin(){
if(myWindow){
myWindow.close();
}
}
function checkWin(){
messsage='';
if(!myWindow){
messsage = "was never opened";
} else {
if(myWindow.closed){
messsage = "is closed";
} else {
messsage = "is open";
}
}
document.getElementById("msg").innerHTML = "myWindow " + messsage;
}
</script>
</head>
<body>
<button id="open" onclick="openWin()" >open myWindow</button>
<button id="colse" onclick="closeWin()">Close myWindow</button>
<!--button id="check" onclick="checkWin()">check if myWindow is open</button-->
<br><br>
<div id="msg"></div>
</body></html>
Case 2: Here we will use form which contains button elements.On click of a button we will open a new window and close it.But here we will have to prevent the default event of the button and prevent the page from reload.
<!DOCTYPE html>
<html>
<head>
<title>browser object new window</title>
<!--https://css-tricks.com/use-button-element/-->
<script>
var myWindow;
function openWin(event){
console.log(event);
event.preventDefault();
myWindow = window.open("","", "width=400,height=200");
}
function closeWin(event){
console.log(event);
event.preventDefault();
//var evt = window.event;
if(myWindow){
myWindow.close();
}
}
function checkWin(event){
msg='';
event.preventDefault();
if(!myWindow){
msg = "was never opened";
} else {
if(myWindow.closed){
msg = "is closed";
} else {
msg = "is open";
}
}
document.getElementById("msg").innerHTML = "myWindow " + msg;
}
</script>
</head>
<body>
<form>
<button id="open" onclick="openWin(event)" >open Window</button>
<button id="close" onclick="closeWin(event)">Close Window</button>
<button id="check" onclick="checkWin(event)">check if Window is open or closed</button>
<br><br>
<div id="msg"></div>
</form>
</body>
</html>
0 Comment(s)