ボタンをクリックした時毎回cssを変化

前提・実現したいこと

ボタンをクリックした時毎回cssを変化させたい。

Javascript
1    var number = 0;
2
3    if (number % 2 == 0){
4          var el;
5
6          var el = document.createElement('div');
7          el.className = 'delete';
8
9
10          // いくつかの内容を与えます
11          var newContent = document.createTextNode(marker.properties.title);
12          // テキストノードを新規作成した div に追加します
13          el.appendChild(newContent);
14
15        } else{
16          var el;
17          var el = document.createElement('div');
18
19          console.log('else');
20          console.log(number);
21          el.className = 'marker';
22
23        }

CSS
1
2    .marker {
3      background-color: #FA193E;
4      width: 16px;
5      height: 16px;
6      border-radius: 50%;
7      cursor: pointer;
8    }
9
10
11    .delete{
12      background-color: white;
13
14    }
15
16
17
18
19    .delete {
20      /* position: relative; */
21      /* display: inline-block; */
22      padding: 7px 10px;
23      min-width: 120px;
24      max-width: 100%;
25      color: #555;
26      font-size: 16px;
27      background: #FFF;
28      border: solid 3px #555;
29      box-sizing: border-box;
30    }
31
32    .delete:before {
33      content: "";
34      position: absolute;
35      bottom: -24px;
36      left: 50%;
37      margin-left: -15px;
38      border: 12px solid transparent;
39      border-top: 12px solid #FFF;
40      z-index: 2;
41    }
42
43    .delete:after {
44      content: "";
45      position: absolute;
46      bottom: -30px;
47      left: 50%;
48      margin-left: -17px;
49      border: 14px solid transparent;
50      border-top: 14px solid #555;
51      z-index: 1;
52    }

kei344

2020/03/28 16:18

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問に状況を追記するなどしてみてください。また、「質問するときのヒント」を読み質問を改善することをお勧めします。 https://teratail.com/help/question-tips