java/lesson9_DOM.html at master · avtohem/java · 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
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
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Getting Started wiht JAVA Script</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <!-- option 1 -->

    <div class="jumbotron text-center">
      <h1>Hello, world!</h1>
      <button class = "btn btn-danger" onclick="goCooCoo()">
        Go C00C00
      </button>
      <button class = "btn btn-danger" onclick="goLigther()">
        Go Lighter
      </button>
      <button class = "btn btn-danger" onclick="goWhite()">
        Go White
      </button>
    </div>

    <!--OPTION 2 use events directly on the elements in JS -->
    <div class="jumbotron text-center">
      <h1>Hello, world!</h1>
      <button class = "btn btn-danger coffee-btn" onclick="goCooCoo()">
        Go COFFEE
      </button>
      <button class = "btn btn-danger coffee-btn" onclick="goCooCoo()">
        Go COFFEE
      </button>
      <button class = "btn btn-danger coffee-btn" onclick="goCooCoo()">
        Go COFFEE
      </button>
    </div>

    <!--OPTION 3use event listeners -->
    <div class="jumbotron text-center">

      <button class = "btn btn-primary lala-btn">
        Not Listening
      </button>

    </div>

    <script>

    // 1 grab elements from the document

    // 2 attach event listeners

    function goCooCoo(){
      //the same thingTL4
      //document.body.style.backgroundColor = '#A44A44';
      const body = document.querySelector('body');
      body.style.backgroundColor = '#C00C00';
    }
    function goLigther(){
      //the same thingTL4
      //document.body.style.backgroundColor = '#A44A44';
      const body = document.querySelector('body');
      body.style.backgroundColor = '#A33A33';
    }
    function goWhite(){
      //the same thingTL4
      //document.body.style.backgroundColor = '#A44A44';
      const body = document.querySelector('body');
      body.style.backgroundColor = '#FFFFFF';
    }

    //OPTION 2 ==========================
    // const  coffeeButton = document.querySelectorAll('.coffee-btn');
    // coffeeButton.onclick = function(){
    //   document.body.style.backgroundColor = '#C0FFEE';
    // }
    // coffeeButton.onmouseenter = goCooCoo;
    const  coffeeButtons = document.querySelectorAll('.coffee-btn');
    function getCoffee(){
      document.body.style.backgroundColor = '#C0FFEE';
    }
    coffeeButtons.forEach(function(button){
      button.onclick = getCoffee;
    });
    //OPTION3 =================================

    const lalaButton = document.querySelector('.lala-btn');

    function notListening(){
      document.body.style.backgroundColor = '#1A1A1A';
    }

    lalaButton.addEventListener('click', notListening);
    lalaButton.addEventListener('onmouseenter', notListening);

    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => button.addEventListener('mouseleave', notListening));

    </script>


  </body>
</html>