Scribd
Upload
15 views

Module 3 Assignment

Uploaded by

priyabhat530
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Module 3 Assignment

Uploaded by

priyabhat530
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Question:1

<!DOCTYPE html>
<html>
<body>
<div id="myText">text1</div>
<script>
setTimeout(function(){
document.getElementById("myText").innerHTML="Hello,world!";
},2000);
</script>
</body>
</html>

Output:-
Question2:-

<!DOCTYPE html>
<html>
<body>
<div class="myDiv">text1</div>
<script>
setTimeout(function(){
document.querySelector(".myDiv").style.backgroundColor="blue";
},5000);
</script>
</body>
</html>

Output:-
Question3:-

<!DOCTYPE html>
<html>
<body>
<div id="container">
Old Paragraph

</div>
<script>
function addParagraph(){

var newParagraph = document.createElement('P');


newParagraph.textContent="New Paragraph";

var container = document.getElementById("container");


container.appendChild(newParagraph);
}
setTimeout(addParagraph,2000);

</script>
</body>
</html>

Output; -
Question4:-

<!DOCTYPE html>
<html>
<head>
<title>
<style>
.hidden{
display:none;
}
</style>
</title>
</head>
<body>
<div id="content">
<p> Original content here.</p>
<button id="addElementButton">Add Element</button>
</div>
<script>
document.getElementById('addElementButton').addEventListener('click',function() {
var newElement = document.createElement('p');
newElement.textContent='this is a newly added element.';
newElement.id='newElement';

document.getElementById('content').appendChild(newElement);

setTimeout(function(){
var elementToRemove=document.getElementById('newElement');
if (elementToRemove){
elementToRemove.remove();
}
},5000);
});
</script>
</body>
</html>
Output:-

After removing element: -


Question5:-

<!DOCTYPE html>
<html>
<head>
<title>button</button>
</title>
</head>
<body>
<button id="MyButton">click Me</button>
<p id="message"></p>

<script>
document.getElementById('MyButton').addEventListener('click',function() {
alert('Button clicked!');
document.getElementById('content').appendChild(newElement);

setTimeout(function(){
document.getElementById('message').textContent='Action performed after
timeout!';
},5000);
});
</script>
</body>
</html>

Output:-
After click: -

Question6:-

<!DOCTYPE html>
<html>
<head>
<title></button>
< </title>
</head>
<body>
<div class="hoverDiv">Hover over me</div>

<script>
document.querySelector('.hoverDiv').addEventListener('mouseover',function(){
this.style.backgroundColor='yellow';

});
</script>
</body>
</html>

Output;-
Output After change its background color: -

You might also like