-->
Showing posts with label JS Programs. Show all posts
Showing posts with label JS Programs. Show all posts

Thursday, June 12, 2025

JavaScript Program to Use getElementById() – DOM based program in JS to convert string into uppercase

 


JS DOM programs collection


JS program to convert entered string into uppercase by user using getElementById()

<!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>


Output:-

JS code to convert string into uppercase



JavaScript Program to Use getElementById() – DOM based program to find sum of two numbers

 

JS DOM programs collection

JS program to find sum of two numbers entered by user using getElementById() (DOM)


<!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>


Output:

JS program to find sum of two numbers entered by user


Friday, June 6, 2025

JavaScript Program to Use getElementById() to count the total number clicked a button | DOM Manipulation in JS with Examples




JS DOM programs collection




JavaScript Program to Use getElementById() to count the total number clicked a button using getElementById (DOM)


<!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>


output:-

JS program to count total clicks


JavaScript Program to Use getElementById– DOM Manipulation in JS with Examples --- To change the contents after clicking

 


JS DOM programs collection



JS program to To change the contents after clicking, using getElementById (DOM)




<!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>


Output:-

JS code to change the contents after clicking the button





Thursday, June 5, 2025

JavaScript Program to Use getElementById and style– DOM Manipulation in JS with Examples --- To hide and show the contents

 

JS DOM programs collection



JS program to show  and hide the content using getElementById (DOM)


<!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>


Output:




JS program to hide/show the contents














JavaScript Program to Use getElementById and oninput event– DOM Manipulation in JS with Examples --- to count total characters entered by user

 

JS DOM programs collection


 JS program to show the concept of getElementById (DOM)



<!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>


Output:-

JS program to count total characters



JavaScript Program to Use getElementById – DOM Manipulation in JS with Examples-to change the background color

 

JS DOM programs collection

 JS program to show the concept of getElementById(DOM)


<!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>

Output:

JS program to change background color



JavaScript Program to Use getElementById – DOM Manipulation in JS with Examples

JS DOM programs collection


 JS program to show the concept of getElementById(DOM)



<!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>


Output:

JS code to implement DOM in program-document.getelementById()