関数の処理が繰り返されない原因が分からないので解決したい。

ボタンクリックでテキストを消す、表示、消すと繰り返したい。

学習内容を記録するアプリケーションを作成しています。

classList.removeが何故か発火されない。

testを使用して関数の処理をその都度、初期化するプロセスを描画したつもりです。

js
1takeBtn.addEventListener('click', function () {
2    if (inputText.value !== '' && test === 0) {
3        getInput.innerHTML = (`"${inputText.value}"`);
4        showFn();
5    } else if (test != 0) {
6        test = 0;
7        showElement.classList.remove('show');
8        getInput.innerHTML = (`"${inputText.value}"`);
9        showFn();
10    }
11});

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Service</title>
9    <link rel="stylesheet" href="css/style.css">
10</head>
11
12<body>
13    <section class="c-one">
14        <h1 class="c-one__title">学習記録</h1>
15        <p class="c-one__text">何を学んでいきたいですか？</p>
16        <input type="text" id="inputC" placeholder="学びたい項目を入力してください" maxlength="20">
17        <button type="submit" id="saveBtn">決定</button>
18    </section>
19
20    <section class="c-two">
21        <div class="c-two__t-wrapper">
22            <h2 class="c-two__title" id="getInput"></h2>
23            <p class="c-two__text fluffy">を学んでいきます</p>
24        </div>
25        <input type="radio" name="watch" value="stop" checked="checked">ストップ
26        <input type="radio" name="watch" value="flexible">裁量
27        <button type="submit" id="conductBtn">開始</button>
28    </section>
29
30    <script src="script.js"></script>
31</body>
32
33</html>

css
1* {
2  padding: 0;
3  margin: 0;
4}
5
6html {
7  font-size: 62.5%;
8}
9
10body {
11  background-color: #ccc;
12}
13
14.fluffy {
15  opacity: 0;
16  visibility: hidden;
17  -webkit-transform: translateX(30px);
18          transform: translateX(30px);
19  -webkit-transition: all 3s;
20  transition: all 3s;
21}
22
23.show {
24  opacity: 1;
25  visibility: visible;
26  -webkit-transform: translateX(0px);
27          transform: translateX(0px);
28}
29/*# sourceMappingURL=style.css.map */

js
1const inputText = document.querySelector('#inputC');
2const takeBtn = document.querySelector('#saveBtn');
3
4const getInput = document.querySelector('#getInput');
5const showElement = document.querySelector('.fluffy');
6
7let test = 0;
8
9// const showElement = document.querySelector('fluffy');
10
11
12takeBtn.addEventListener('click', function () {
13    if (inputText.value !== '' && test === 0) {
14        getInput.innerHTML = (`"${inputText.value}"`);
15        showFn();
16    } else if (test != 0) {
17        test = 0;
18        showElement.classList.remove('show');
19        getInput.innerHTML = (`"${inputText.value}"`);
20        showFn();
21    }
22});
23
24
25function showFn() {
26    // let showElement = document.querySelector('.fluffy');
27    showElement.classList.add('show');
28    return test = 1;
29};
30
31
32// function limit(element) {
33//     var max_chars = 2;
34//     if(element.value.length > max_chars) {
35//         element.value = element.value.substr(0,max_chars);
36//     }
37// };