classNameが空文字だったらとはどういう状態？

今はフラッシュカードをやっていますが

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8
9    <style>
10        body {
11            margin: 0;
12            background: #e0e0e0;
13            text-align: center;
14            font-family: Verdana, sans-serif;
15            color: #fff;
16        }
17
18        #btn {
19            width: 200px;
20            margin: 0 auto;
21            padding: 7px;
22            border-radius: 5px;
23            background: #00aaff;
24            box-shadow: 0 4px 0 #0088cc;
25            cursor: pointer;
26        }
27
28        #btn:hover {
29            opacity: 0.8;
30        }
31
32        #card {
33            margin: 60px auto 20px;
34            width: 400px;
35            height: 100px;
36            cursor: pointer;
37            font-size: 38px;
38            line-height: 100px;
39            perspective: 100px;
40            transform-style: preserve-3d;
41            transition: transform 0.8s;
42        }
43
44        #card-front,
45        #card-back {
46            width: 100%;
47            height: 100%;
48            border-radius: 5px;
49            position: absolute;
50            backface-visibility: hidden;
51        }
52
53        #card-front {
54            background: #fff;
55            color: #333;
56        }
57
58        #card-back {
59            background: #00aaff;
60            transform: rotateY(180deg);
61        }
62
63        .open {
64            transform: rotateY(180deg);
65        }
66    </style>
67</head>
68
69<body>
70    <div id="card">
71        <div id="card-front"></div>
72        <div id="card-back"></div>
73    </div>
74    <div id="btn">NEXT</div>
75
76
77    <script>
78        (function () {
79            'use strict';
80
81            let words = [
82                { 'en': 'read', 'ja': '読む' },
83                { 'en': 'write', 'ja': '書く' },
84                { 'en': 'eat', 'ja': '食べる' },
85                { 'en': 'run', 'ja': '走る' },
86                { 'en': 'walk', 'ja': '歩く' }
87            ];
88
89            let card = document.querySelector('#card');
90            let cardFront = document.querySelector('#card-front');
91            let cardBack = document.querySelector('#card-back');
92            let btn = document.querySelector('#btn');
93
94            card.addEventListener('click', function () {
95                flip();
96            });
97            btn.addEventListener('click', function() {
98                next();
99            })
100
101            function next() {
102                let num = Math.floor(Math.random() *words.length);
103                cardFront.innerHTML = words[num]['en'];
104                cardBack.innerHTML = words[num]['ja'];
105            }
106
107            next();
108
109            function flip() {
110                card.className = card.className === '' ? 'open' : '';
111            }
112        })();
113    </script>
114</body>
115
116</html>

このまま実行したらカードの表面が表示されて、70行目にclass="open"を追加したらカードの裏面が表示されますが、110行が機能しているということで合ってます？
分かりづらいので70行目は常に<div id="card" class="open">としたいです。
デフォルトで表面が表示されたら良いと思うのですが、どうしたら良いですか？

70行目を<div id="card" class="open">にして、
110行目をcard.className = card.className === 'open' ? 'open' : '';にしても裏面が表示されます。

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

回答2件

ベストアンサー

classNameが空文字だったらとはどういう状態？

openクラスのつけはずしで処理しています
HTML要素はclassNameプロパティにクラス名の一覧を保持しているので空ならOPENをつけ空でないなら空にするというのはちょうどtoggleに近い処理です（実際には他のクラスが設定されても反応してしまいますが）
クラスの名前へのアクセスはclassNameプロパティではなくclassListでやったほうが楽です

html
1<div id="hoge">hoge</div>
2<div id="fuga" class="a b">fuga</div>
3<script>
4console.log(hoge.classList.length);//0
5console.log(hoge.className==="");//true
6console.log(fuga.classList.length);//2
7console.log(fuga.classList.contains('a'));//true
8</script>

参考までにトグルする場合はこういう感じ、cardをクリックするたびopenがつけ外しされて背景色が変わる

html
1<div id="card" class="open">card</div>
2<style>
3.open{background-Color:gray;}
4</style>
5<script>
6card.addEventListener('click',()=>card.classList.toggle('open'));
7</script>

投稿2024/10/30 00:30

yambejp

総合スコア116468

zawber

2024/10/30 05:50

```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin: 0; background: #e0e0e0; text-align: center; font-family: Verdana, sans-serif; color: #fff; } #btn { width: 200px; margin: 0 auto; padding: 7px; border-radius: 5px; background: #00aaff; box-shadow: 0 4px 0 #0088cc; cursor: pointer; } #btn:hover { opacity: 0.8; } #card { margin: 60px auto 20px; width: 400px; height: 100px; cursor: pointer; font-size: 38px; line-height: 100px; perspective: 100px; transform-style: preserve-3d; transition: transform 0.8s; } #card-front, #card-back { width: 100%; height: 100%; border-radius: 5px; position: absolute; backface-visibility: hidden; } #card-front { background: #fff; color: #333; } #card-back { background: #00aaff; transform: rotateY(180deg); } .open { transform: rotateY(180deg); } </style> </head> <body> <div id="card" class="open"> <div id="card-front"></div> <div id="card-back"></div> </div> <div id="btn">NEXT</div> <script> (function () { 'use strict'; let words = [ { 'en': 'read', 'ja': '読む' }, { 'en': 'write', 'ja': '書く' }, { 'en': 'eat', 'ja': '食べる' }, { 'en': 'run', 'ja': '走る' }, { 'en': 'walk', 'ja': '歩く' } ]; let card = document.querySelector('#card'); let cardFront = document.querySelector('#card-front'); let cardBack = document.querySelector('#card-back'); let btn = document.querySelector('#btn'); card.addEventListener('click', () => classList.toggle('open')); btn.addEventListener('click', function() { next(); }) function next() { let num = Math.floor(Math.random() *words.length); cardFront.innerHTML = words[num]['en']; cardBack.innerHTML = words[num]['ja']; } next(); // function flip() { // card.classList.toggle('open'); // } })(); </script> </body> </html> ``` 合ってます？

yambejp

2024/10/30 08:12 編集

＞合ってます？想定している動作をしているなら「間違い」ではないと思いますが逆に何が引っかかっているのでしょうか？「フラッシュカード」の仕様を明示されるとよいでしょう

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

playground で用意するならこんな感じですね。
https://livecodes.io/?x=id/5ca4bjutqin

> classNameが空文字だったらとはどういう状態？

ここでは open ではないの意で使われていますね。

> 110行が機能しているということで合ってます？

そうです。

> デフォルトで表面が表示されたら良いと思うのですが、どうしたら良いですか？

初期状態は表面では？

もしも次に切り替える際に裏なら表にしたいという意でありましたら
次の様に next() 内で className を空文字にしたらいいのではないでしょうか？

js
1function next() {
2    card.className = '';
3    let num = Math.floor(Math.random() *words.length);
4    cardFront.innerHTML = words[num]['en'];
5    cardBack.innerHTML = words[num]['ja'];
6}

空文字を入れるよりは次の様な書き方の方が望ましいとは思いますが。

js
1card.classList.remove('open');

ただ、これだと裏状態だと裏から表になるアニメーション前なので答えが見えてしまいます。
cardFront.innerHTML = words[num]['en'];
の後にしてみるならどうでしょうか？
いえ、アニメーションを待つわけではないので見えてしまいます。

js
1function next() {
2    let num = Math.floor(Math.random() *words.length);
3    cardFront.innerHTML = words[num]['en'];
4    card.classList.remove('open');
5    cardBack.innerHTML = words[num]['ja'];
6}

アニメーションを待つにはどうしたらいいでしょうか？

css の transform の完了を知らせるイベントは transitionend です。
その為、次の様に next() メソッドを書き換えることでうまくいきます。

js
1  function next() {
2    let num = Math.floor(Math.random() * words.length);
3    // 表の値はさっさと設定する
4    cardFront.innerHTML = words[num]["en"];
5
6    // 非同期を挟むので 繋げる為の Promise を用意する
7    let promise = Promise.resolve();
8    // 開いていた場合は表を向く アニメーションを待つ
9    if (card.classList.contains('open')){
10        promise = promise.then(() => new Promise(resolve => {
11            card.addEventListener('transitionend', resolve, { once: true });
12            card.classList.remove('open');
13            console.log(promise);
14        }));
15    }
16    // 裏側は 切り替わり時に見えるとまずいのでアニメーション後に設定する
17    return promise.then(() => {
18        cardBack.innerHTML = words[num]["ja"];
19    })
20  }

※ addEventListener の option に設定している {once:true} は呼ばれたら解除されるイベントの意。

これだとちょっと長ったらしいですね。 async / await を使ってもうちょっとシンプルに書いてみると次の様になります。

js
1async function next() {
2    let num = Math.floor(Math.random() * words.length);
3    // 表の値はさっさと設定する
4    cardFront.innerHTML = words[num]["en"];
5
6    // 開いていた場合は表を向く アニメーションを待つ
7    if (card.classList.contains("open")) {
8        const { resolve, promise } = Promise.withResolvers();
9        card.addEventListener("transitionend", resolve, { once: true });
10        card.classList.remove("open");
11        await promise;
12    }
13
14    // 裏側は 切り替わり時に見えるとまずいのでアニメーション後に設定する
15    cardBack.innerHTML = words[num]["ja"];
16}

> 110行目をcard.className = card.className === 'open' ? 'open' : '';にしても裏面が表示されます。

三項演算子を if に直して考えてみたらいいのでは？
それはつまり次のコードと同義ですよね？なんかおかしいことに気が付けますでしょうか？

js
1let v;
2if (card.className === 'open') {
3 v ='open';
4} else {
5 v = '';
6}
7card.className = v;

私としては className を直接使うよりは classList を使う形に修正して切り替える為の toggle() を使った方がわかりやすいとは思います。

js
1card.classList.toggle("open");

まとめ

でそれらを踏まえたコードが次の様になります。

html
1<style>
2  body {
3    margin: 0;
4    background: #e0e0e0;
5    text-align: center;
6    font-family: Verdana, sans-serif;
7    color: #fff;
8  }
9
10  #btn {
11    width: 200px;
12    margin: 0 auto;
13    padding: 7px;
14    border-radius: 5px;
15    background: #00aaff;
16    box-shadow: 0 4px 0 #0088cc;
17    cursor: pointer;
18  }
19
20  #btn:hover {
21    opacity: 0.8;
22  }
23
24  #card {
25    margin: 60px auto 20px;
26    width: 400px;
27    height: 100px;
28    cursor: pointer;
29    font-size: 38px;
30    line-height: 100px;
31    perspective: 100px;
32    transform-style: preserve-3d;
33    transition: transform 0.8s;
34  }
35
36  #card-front,
37  #card-back {
38    width: 100%;
39    height: 100%;
40    border-radius: 5px;
41    position: absolute;
42    backface-visibility: hidden;
43  }
44
45  #card-front {
46    background: #fff;
47    color: #333;
48  }
49
50  #card-back {
51    background: #00aaff;
52    transform: rotateY(180deg);
53  }
54
55  .open {
56    transform: rotateY(180deg);
57  }
58</style>
59<main>
60  <div id="card">
61    <div id="card-front"></div>
62    <div id="card-back"></div>
63  </div>
64  <div id="btn">NEXT</div>
65</main>
66<script type="module">
67  const words = [
68    { en: "read", ja: "読む" },
69    { en: "write", ja: "書く" },
70    { en: "eat", ja: "食べる" },
71    { en: "run", ja: "走る" },
72    { en: "walk", ja: "歩く" },
73  ];
74
75  const card = document.querySelector("#card");
76  const cardFront = document.querySelector("#card-front");
77  const cardBack = document.querySelector("#card-back");
78  const btn = document.querySelector("#btn");
79
80  card.addEventListener("click", function () {
81    flip();
82  });
83  btn.addEventListener("click", function () {
84    next();
85  });
86
87  async function next() {
88    const num = Math.floor(Math.random() * words.length);
89    // 表の値はさっさと設定する
90    cardFront.innerHTML = words[num]["en"];
91
92    // 開いていた場合は表を向く アニメーションを待つ
93    if (card.classList.contains("open")) {
94      const { resolve, promise } = Promise.withResolvers();
95      card.addEventListener("transitionend", resolve, { once: true });
96      card.classList.remove("open");
97      await promise;
98    }
99    // 裏側は 切り替わり時に見えるとまずいのでアニメーション後に設定する
100    cardBack.innerHTML = words[num]["ja"];
101  }
102
103  next();
104
105  function flip() {
106    card.classList.toggle("open");
107  }
108</script>