-->
Showing posts with label getElementById. Show all posts
Showing posts with label getElementById. Show all posts

Saturday, June 28, 2025

JavaScript Program to use function to find sum of series– Function concept in JS with Examples

 

JS Function programs collection

JS program to show the concept of function

JS program to find sum of series using function  sum()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>sum of series</title>

</head>

<body>

<h1>the sum is</h1>

<script type="text/javascript">

function sum()

{

var i,sum=0;

for(i=1;i<=100;i++)

{

sum+=i;

}

document.write(sum);

}

</script>

<script type="text/javascript">

sum();

</script>

</body>

</html>

Thursday, June 26, 2025

JavaScript Program to Use querySelector() – DOM Manipulation in JS with Examples

 


JS DOM programs collection



JS program to show the concept of querySelector()

<!-- In JavaScript, 
querySelector() is a method provided by the DOM (Document Object Model) that allows you to select the first HTML element that matches a specified CSS selector. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DOM (queryselector)</title>
</head>
<body>
<p id="id1">hello DOM</p>
<script>
var txt;
txt=document.querySelector('#id1');
txt.style.color="green";
</script>

</body>
</html>

Thursday, June 12, 2025

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


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