-->
Showing posts with label getElementById(). Show all posts
Showing posts with label getElementById(). 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