javascript-button/index.html at master · stanmouDev/javascript-button · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="free web tutorials">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Stan Dev">
  <title>Document</title>
</head>
<body>

  <h3>My first JavaScript</h3>

  <button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display date and Time.</button>

  <p id="demo"></p>

  <h5>My Second JavaScript</h5>

  <button type="button" onclick="document.getElementById('demostrate').innerHTML = Date()"> Click me to display date and Time</button>

  <p id="demostrate"></p>

  <h6> My Theird JavaScript</h6>

  <button type="button" onclick="document.getElementById('done').innerHTML = Date()">Click me to Display Date and Time</button>

  <p id="done"></p>

  <h1>My Fourth JavaScript</h1>

  <button type="button" onclick="document.getElementById('don').innerHTML = 'Hello JavaScript!'"> Click me to display msg </button>

  <p id="don">JavaScript can change HTML content.</p>

  <h1>What JavaScriptCan Do</h1>

  <p>JavaScript Can Change HTML attribute values.</p>

  <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

  <button type="button" onclick="document.getElementById('myImage').src='pic_bulbon.png'">Turn on the light</button>

  <img id="myImage" src="pic_bulboff.png" style="width: 100px;">

  <button type="button" onclick="document.getElementById('myImage').src='pic_bulboff.png'">Turn off the light</button>

  <h5>What JavaScriptcan do</h5>

  <p id="Demos">JavaScriptcan change the style of an HTML element.</p>

  <button type="button" onclick="document.getElementById('Demos').style.fontSize='30px'">Clic to see changes</button>

  <p>JavaScript can show hidden HTML element.</p>

  <p id="Demost" style="display:none;">Hello JavaScript!</p>

  <button type="button" onclick="document.getElementById('Demost').style.display='block'">Click me</button>


</body>
</html>