-->

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