-->
Showing posts with label style with JS. Show all posts
Showing posts with label style with JS. Show all posts

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


Friday, June 6, 2025

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