practising C, C++ and JAVA programming with examples: getElementById

Showing posts with label getElementById. Show all posts

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>

<title>hiding and showing the text(toggling)</title>

</head>

<body>

<button onclick="shText();">click to hide/show</button>

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>

<title>counting typed characters</title>

</head>

<body>

Enter your text<br>

<p>total characters you have types is:<span id="total">0</span></p>

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>

<title>background change</title>

</head>

<body>

<button onclick="colorChange();">click to change the background</button>

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>

<title>background change</title>

</head>

<body>

<button id="bt1" onclick="colorChange();">click to change the background</button>

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

practising C, C++ and JAVA programming with examples

menu

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)

Output:

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)

Output:-

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)

Output:

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

JS DOM programs collection

JS program to show the concept of getElementById(DOM)

Output:

Labels