-
Notifications
You must be signed in to change notification settings - Fork 0
/
9.4_prac.html
97 lines (80 loc) · 2.51 KB
/
9.4_prac.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
<title>Practice DOM</title>
</head>
<body>
<h2>PRACTICE 1</h2>
<button class="js-button" onclick="
changing();
">9a</button>
<p class="js-para"> Original</p>
<h2>PRACTICE 2</h2>
<button class="js-button2" onclick="
secondbutton();
">9b</button>
<h2>PRACTICE 3</h2>
<input type="text" placeholder="Enter name to verify" class="js-verify">
<button onclick="Practice3()">verify</button>
<p class="js-para2"></p>
<h2>PRACTICE 4</h2>
<p>Amazon Cost Calculator</p>
<input type="text" placeholder="Enter the cost" class="js-cost-input">
<button onclick="
Practice4();
">calculate</button>
<p class="js-total-cost"></p>
<script>
console.log(document.title);
function changing() {
const buttonElement = document.querySelector('.js-button');
const paraElem = document.querySelector('.js-para');
if (buttonElement.innerHTML === '9a') {
buttonElement.innerHTML = '9b';
}
else {
buttonElement.innerHTML = '9a';
}
if (paraElem.innerHTML === 'Changed!') {
paraElem.innerHTML = 'Unchanged!';
}
else {
paraElem.innerHTML = 'Changed!';
}
console.log(document.title);
document.title = ('Practicing DOM');
}
//console.log(document.body.innerHTML=('<button>9a</button>'));
// document.body.innerHTML=('<button>9b</button>');
function secondbutton() {
const buttonElement2 = document.querySelector('.js-button2');
if (buttonElement2.innerHTML === '9b') {
buttonElement2.innerHTML = '9b Done';
}
else {
buttonElement2.innerHTML = '9b';
}
}
function Practice3() { // and button3 does'nt need to convert to j-script
let paraElem2 = document.querySelector('.js-para2');
const verifyElem = document.querySelector('.js-verify').value; // input element does'nt need .innerHTML
if (verifyElem === 'Roshan') {
paraElem2.innerHTML = 'Person verified!';
}
else {
paraElem2.innerHTML = 'Invalid Username!';
}
}
function Practice4() {
const costInput = document.querySelector('.js-cost-input');
let cost = Number(costInput.value); // this is how we get value inside text-box
// whenever we get value manually we need to convert to numbers
if (cost <= 40) {
cost += 10;
}
document.querySelector('.js-total-cost')
.innerHTML = `Total cost calculated $${cost}`;
}
</script>
</body>
</html>