-->
Showing posts with label DOM in JavaScript. Show all posts
Showing posts with label DOM in JavaScript. Show all posts

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()