jsでの簡単なカウンター作成について

jsでのカウンターについての質問です。

jsでのマウスが要素に乗った時にカウントのアップダウンのできる簡単な
ものも作成しようと思っているのですが、カウントのアップは出来てもダウンの方がうまくいきません。
html,cssについては適当に書いてしまっているので汚く見えづらくてすみません。

そもそもこの組み方では不可能でしょうか。
この組み方で可能でしたら、ご教示いただけると大変助かります。

該当のソースコード


window.addEventListener('DOMContentLoaded',
    function () {

        var plus = document.querySelector('.plus');
        var minus = document.querySelector('.minus');
        var count = document.querySelector('.count');
        var num = 0;


        plus.addEventListener('mouseover', function () {
         num = num+1;
            
            count.innerText = num;

        minus.addEventListener('mouseover', function () {
            num = num-1;
            
            count.innerText = num;
           }, false);
        }, false);
    }, false);

<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>sample</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
       
        <h1 class="count">0</h1>
        
    <main>
        <div class="plus">
            +
        </div>
        <div class="minus">
            -
        </div>
    </main>
        <script src="main.js"></script>
    </body>
</html>

body{
1    background: #444;
2}
3h1{
4    text-align: center;
5    padding: 100px;
6    padding-bottom: 30px;
7    font-size: 100px;
8    width: 980px;
9    margin-left: auto;
10    margin-right: auto; 
11}
12
13main{
14    position: relative;
15    overflow: hidden;
16    background: #f6f5f5;
17    width: 980px;
18    height: 500px;
19    margin: auto;
20    margin-bottom: 200px;
21}
22div{
23    font-size: 100px;
24    float: left;
25    width: 200px;
26    height: 200px;
27    background: #444;
28    text-align: center;
29    border-radius: 100px;
30    line-height: 180px;
31}
32.plus{
33    position: absolute;
34    top:150px;
35    left: 200px;
36}
37.minus{
38    position: absolute;
39    top: 150px;
40    right: 200px;
41}
42コード

試したこと

色々と試してみたり検索してみたのですが、分からず質問させて頂きました。

行動規範の内容に同意します

回答2件

ベストアンサー

あまりこういう書き方はお勧めしないかな？
その昔、メモリーリークパターンだって教えられたから。
（今は解決済みらしいのだけれど）

jaascript
1window.addEventListener('DOMContentLoaded',
2    function () {
3
4        var plus = document.querySelector('.plus');
5        var minus = document.querySelector('.minus');
6        var count = document.querySelector('.count');
7        var num = 0;
8
9
10        plus.addEventListener('mouseover', function () {
11            num += 1;
12            count.innerText = num;
13        }, false);
14
15        minus.addEventListener('mouseover', function () {
16            num -= 1;
17            count.innerText = num;
18        }, false);
19    }, false);
20

蛇足も追加

javascript
1<html lang="ja">
2<meta charset="utf-8">
3<title>sample</title>
4<style>
5main{
6    position: relative;
7    overflow: hidden;
8    background: #f6f5f5;
9    width: 980px;
10    height: 200px;
11    margin: auto;
12}
13div{
14    font-size: 50px;
15    float: left;
16    width: 100px;
17    height: 100px;
18    background: #444;
19    text-align: center;
20    border-radius: 50px;
21    line-height: 90px;
22}
23.plus{
24    position: absolute;
25    top:50px;
26    left: 100px;
27}
28.minus{
29    position: absolute;
30    top: 50px;
31    right: 100px;
32}
33</style>
34
35
36<body>
37<h1 class="count">0</h1>
38<main>
39  <div class="plus">+</div>
40  <div class="minus">-</div>
41</main>
42<h1 class="count">0</h1>
43<main>
44  <div class="plus">+</div>
45  <div class="minus">-</div>
46</main>
47<h1 class="count">0</h1>
48<main>
49  <div class="plus">+</div>
50  <div class="minus">-</div>
51</main>
52
53<script>
54
55
56class Counter {
57
58   constructor (plus, minus, count, num = 0) {
59     this.plus  = plus;
60     this.minus = minus;
61     this.count = count;
62     this.num   = num;
63     
64     this.disp ();
65     [plus, minus].forEach (e =>
66       e.addEventListener ('mouseover', this, false));
67   }
68   
69   up () {
70     this.num += 1;
71     this.disp ();
72   }
73   
74   down () {
75     this.num -= 1;
76     this.disp ();
77   }
78   
79   disp () {
80     this.count.textContent = this.num;
81   }
82   
83   handleEvent (event) {
84     switch (event.type) {
85     case 'mouseover' :
86       let e = event.target;
87       if (this.plus == e)
88         this.up ();
89       else if (this.minus == e)
90         this.down ();
91       break;
92     }
93   }
94}
95
96//___________________________________________
97
98function demo () {
99  let
100    plus = document.querySelectorAll ('.plus'),
101    minus = document.querySelectorAll ('.minus'),
102    count = document.querySelectorAll ('.count');
103  
104  Array(3).fill(0).forEach ((_,i) => {
105    new Counter (plus[i], minus[i], count[i]);
106  });
107}
108
109
110window.addEventListener('DOMContentLoaded', demo, false);
111</script>
112
113
114

投稿2019/03/27 15:52

編集2019/03/27 16:30

退会済みユーザー

総合スコア0

shooooo

2019/03/27 16:27

回答の方ありがとうございました！そこで一度切ればよかったのですね！大変勉強になります！

行動規範の内容に同意します

js
1window.addEventListener('DOMContentLoaded', function () {
2
3  var plus = document.querySelector('.plus');
4  var minus = document.querySelector('.minus');
5  var count = document.querySelector('.count');
6  var num = 0;
7
8  plus.addEventListener('mouseover', function () {
9    num = num+1;
10
11    count.innerText = num;
12  }, false);
13
14  minus.addEventListener('mouseover', function () {
15    num = num-1;
16
17    count.innerText = num;
18  }, false);
19
20}, false);
21```**動くサンプル：**[https://jsfiddle.net/p5hayftj/](https://jsfiddle.net/p5hayftj/)