JavaScript
1.Alert
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button type="button" onclick="alert('Alert display');">Display Alert</button>
</body>
</html>
2.Oneclick html event
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>onClick HTML Event</h1>
<input onclick="fun_name();" type="button" value="Click Here">
<script>
function fun_name()
{
alert("Function Called");
}
</script>
</body>
</html>
3. JavaScript one click
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>JavaScript onclick</h1>
<input id="btnid1" type="button" value="Button 1">
<input id="btnid2" type="button" value="Button 2">
<script>
var btn1 = document.getElementById("btnid1");
var btn2 = document.getElementById("btnid2");
btn1.onclick = fun_name;
btn2.onclick = function()
{
alert("call function definition directly");
};
function fun_name()
{
alert("Function Called");
}
</script>
</body>
</html>
4. ADD EVET LISTENER
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>addEventListener click function</h1>
<input id="btnid1" type="button" value="Button 1">
<input id="btnid2" type="button" value="Button 2">
<script>
var btn1 = document.getElementById("btnid1");
var btn2 = document.getElementById("btnid2");
btn1.addEventListener("click", fun_name, false);
btn2.addEventListener("click", function()
{
alert("call function definition directly");
}, false)
function fun_name()
{
alert("Function Called");
}
</script>
</body>
</html>
5. function
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Function</h1>
<!--onfocus,onchange,onmouseover,onmouseout,onkeydown,onload-->
<button type="button" onclick="call_fun();">Call Function</button>
<script>
function call_fun()
{
alert("Function Called");
}
</script>
</body>
</html>
6. GET ELEMENT BYLD
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>getByElementID</h1>
<input type="text" value="20" id='txt1'>
<button type="button" onclick="get_txt();">Get Textbox value</button>
<script>
function get_txt()
{
var txt_val; //Initialize variable
txt_val = document.getElementById('txt1').value;
alert(txt_val);
}
</script>
</body>
</html>
7.Get element by classname
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" value="20" class='txt1'>
<input type="text" value="100" class='txt1'>
<button type="button" onclick="get_txt();">Get Textbox value</button>
<script>
function get_txt()
{
var x = document.getElementsByClassName("txt1");
alert(x[0].value);
alert(x[1].value);
}
</script>
</body>
</html>
8.INNERTEXT
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="t_div">Old Text</div>
<button type="button" onclick="set_txt();">Change Text</button>
<script>
function set_txt()
{
document.getElementById("t_div").innerText = "<b>New Text</b>";
}
</script>
</body>
</html>
Comments