JS Function programs collection
JS program to show the concept of arrow function
<script>
JS program using arrow function to return an object
()
tells JavaScript: “This is returning an expression.-->
()
tells JavaScript: “This is returning an expression.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sum of series</title>
</head>
<body>
<h1>the sum is</h1>
<script type="text/javascript">
function sum()
{
var i,sum=0;
for(i=1;i<=100;i++)
{
sum+=i;
}
document.write(sum);
}
</script>
<script type="text/javascript">
sum();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>auto appearing text</title>
</head>
<body>
<form>
enter your text:<br>
<input type="text" id="data" oninput="textappear()">
</form>
<p id="text">
</p>
<script type="text/javascript">
function textappear()
{
var t;
t=document.getElementById('data').value;
document.getElementById('text').innerText=t;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>js program to convert into uppercase</title>
</head>
<body>
<form>
enter your text:<input type="text" id="mytext" placeholder="enter a text">
</form>
<button onclick="convertintouppercase();">change into uppercase</button>
<p id="result"></p>
<script>
function convertintouppercase()
{
var txt;
txt=document.getElementById('mytext').value;
document.getElementById('result').innerText=txt.toUpperCase();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>js program to find sum of two numbers using text boxes</title>
</head>
<body>
<form>
enter first number:<input type="text" id="n1" placeholder="enter first number"><br>
enter second number:<input type="text" id="n2" placeholder="enter second number"><br>
</form>
<button onclick="sumnumbers();">click to find the sum</button>
<p>sum is:<span id="resultsum"></span></p>
<p>difference is:<span id="resultdiff"></span></p>
<script>
function sumnumbers()
{
var number1,number2,sum;
number1=parseFloat(document.getElementById('n1').value);
number2=parseFloat(document.getElementById('n2').value);
sum=number1+number2;
document.getElementById('resultsum').innerText=sum;
document.getElementById('resultdiff').innerText=number1-number2;
}
</script>
</body>
</html>
JS program to find sum of two numbers entered by user |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>to count total number of times we clicked the button</title>
</head>
<body>
<button onclick="totalclicks();">click me</button>
<p>clicked times=<span id="count"></span></p>
<script>
var c=0;
function totalclicks()
{
c++;
document.getElementById('count').innerText=c;
}
</script>
</body>
</html>
JS program to count total clicks |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DOM concept</title>
</head>
<body>
<p id='p1'>hello world, you are beautiful.</p>
<button onclick="textChange();">click to change the text</button>
<script>
function textChange()
{
document.getElementById("p1").innerHTML="this is a new text";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hiding and showing the text(toggling)</title>
</head>
<body>
<p id="para1">this is JS code</p>
<button onclick="shText();">click to hide/show</button>
<script>
function shText()
{
var p;
p=document.getElementById('para1');
if(p.style.display=="none")
{
p.style.display="block";
}
else
{
p.style.display="none";
}
}
</script>
</body>
</html>
![]() |
JS program to hide/show the contents |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>counting typed characters</title>
</head>
<body>
Enter your text<br>
<textarea id="messagecount" oninput="charasCount();" rows="10" cols="10"></textarea>
<p>total characters you have types is:<span id="total">0</span></p>
<script>
function charasCount()
{
var i;
i=document.getElementById('messagecount').value;
document.getElementById('total').innerText=i.length;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background change</title>
</head>
<body>
<button onclick="colorChange();">click to change the background</button>
<script>
function colorChange()
{
document.body.style.backgroundColor="orange";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background change</title>
</head>
<body>
<button id="bt1" onclick="colorChange();">click to change the background</button>
<script>
function colorChange()
{
//var id=document.getElementById('bt1');
//OR
document.getElementById('bt1').style.backgroundColor="purple";
}
</script>
</body>
</html>