Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit eee8d34

Browse files
Merge pull request #47 from AzharAli-github/main
HTML-DOM
2 parents 59eb0a3 + 49dcfd6 commit eee8d34

File tree

6 files changed

+62
-0
lines changed

6 files changed

+62
-0
lines changed
4.15 KB
Loading[フレーム]
207 KB
Loading[フレーム]
168 KB
Loading[フレーム]
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>DOM-Changing-HTML</title>
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
11+
12+
</head>
13+
14+
<body>
15+
<h1>DOM-Changing HTML</h1>
16+
<h2>Example One</h2>
17+
<p id="textOne">Hello There</p>
18+
<button onclick="DisplayOne()">Click to change the above content</button><br><br>
19+
<h2>Example Two</h2>
20+
<img src="images/one.jpg" alt="" id="imgOne"><br>
21+
<button onclick="DisplayTwo()">Click to change the above image</button>
22+
<h2>Example Three</h2>
23+
<p id="textTwo"></p>
24+
<h2>Example Four</h2>
25+
<p id="textThree"></p>
26+
<script src="script.js"></script>
27+
</body>
28+
29+
</html>
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
//Example One
2+
let textOne = document.getElementById('textOne');
3+
4+
function DisplayOne() {
5+
textOne.innerHTML = "Hope you are Fine";
6+
}
7+
// Example Two
8+
let imgOne = document.getElementById('imgOne');
9+
10+
function DisplayTwo() {
11+
imgOne.src = "images/two.jpg"
12+
}
13+
// Example Three
14+
let textTwo = document.getElementById('textTwo');
15+
16+
function DisplayThree() {
17+
textTwo.innerHTML = "Date" + Date();
18+
}
19+
DisplayThree();
20+
21+
// Example Four
22+
23+
let textThree = document.getElementById('textThree');
24+
25+
textThree.innerHTML = document.write(Date())
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
h2 {
2+
font-family: monospace;
3+
}
4+
5+
img {
6+
height: 300px;
7+
width: 300px;
8+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /