preventDefault();を解除できない問題を解決したい。

window読み込み時に記述したpreventDefault();を無効化したい。

formのボタンを押したときに守るべきJavaScriptの条件式を無視してページ移行するのを防ぐ為に書いた。

preventDefault();を解除する方法について知りたい。

js
1//inputの内容が正しい時に、このコードのpreventDefaultを解除したい。
2let test = window.addEventListener('load', () => {
3    firstForm.addEventListener('click', function (event) {
4        event.preventDefault();
5    })
6});
7
8//ここで上記のコードを解除する記述を行う。
9firstBtn.addEventListener('click', () => {
10    const itemValue = firstInput.value;
11    if (itemValue !== '' && itemValue.length < max_char) {
12        const content = document.getElementById('first-content');
13        content.classList.add('fadeout');
14        content.addEventListener('animationend', () => {
15            content.remove();
16            //submit解禁
17            test = false;
18        });
19    } else if (itemValue.length > 10) {
20        alert('文字数を減らして下さい');
21    } else {
22        alert('文字を入力してください');
23    }
24});

該当のソースコード

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="content" id="first-content">
14        <div class="content__wrapper">
15            <h1 class="content__title js-animation">What do you learn?</h1>
16            <form action="submit.php" method="post" id="first-form">
17                <div class="content__column js-animation">
18                    <p class="content__text">item: <input type="text" name="item" id="first-input"></p>
19                    <p class="content__at-text none" id="at-text">Please remove text charset!</p>
20                    <button type="submit" id="first-btn">move on</button>
21                </div>
22            </form>
23        </div>
24    </section>
25    <script src="script.js"></script>
26</body>
27
28</html>

css
1* {
2  padding: 0;
3  margin: 0;
4}
5
6html {
7  font-size: 62.5%;
8}
9
10body {
11  font-family: cursive;
12  display: -webkit-box;
13  display: -ms-flexbox;
14  display: flex;
15  -webkit-box-pack: center;
16      -ms-flex-pack: center;
17          justify-content: center;
18  -webkit-box-align: center;
19      -ms-flex-align: center;
20          align-items: center;
21  min-height: 100vh;
22  background: -webkit-gradient(linear, left top, left bottom, from(#1e90ff), to(#00008b));
23  background: linear-gradient(#1e90ff, #00008b);
24  background-size: cover;
25}
26
27input,
28textarea,
29button {
30  font-family: inherit;
31}
32
33.content__title {
34  font-size: 3.6rem;
35  color: #fff;
36  margin-bottom: 2rem;
37}
38
39.content__column {
40  display: -webkit-box;
41  display: -ms-flexbox;
42  display: flex;
43  -webkit-box-pack: center;
44      -ms-flex-pack: center;
45          justify-content: center;
46  -webkit-box-align: center;
47      -ms-flex-align: center;
48          align-items: center;
49  -webkit-box-orient: vertical;
50  -webkit-box-direction: normal;
51      -ms-flex-direction: column;
52          flex-direction: column;
53}
54
55.content__text {
56  font-size: 1.6rem;
57  color: #fff;
58}
59
60.content__at-text {
61  font-size: 1.6rem;
62  color: #fff;
63  margin-bottom: 2rem;
64}
65
66.content button {
67  font-size: 1.6rem;
68  padding: 0.5rem;
69  cursor: pointer;
70}
71
72.is-show {
73  opacity: 1;
74  visibility: visible;
75  -webkit-transform: translateY(0px);
76          transform: translateY(0px);
77  -webkit-transition: all 1s;
78  transition: all 1s;
79}
80
81.js-animation:not(.is-show) {
82  opacity: 0;
83  visibility: hidden;
84  -webkit-transform: translateY(40px);
85          transform: translateY(40px);
86}
87
88.none {
89  opacity: 0;
90  -webkit-transition: all 1s;
91  transition: all 1s;
92}
93
94.fadeout {
95  -webkit-animation: fadeOut 1s;
96          animation: fadeOut 1s;
97  -webkit-animation-fill-mode: both;
98          animation-fill-mode: both;
99}
100
101@-webkit-keyframes fadeOut {
102  0% {
103    opacity: 1;
104  }
105  100% {
106    opacity: 0;
107  }
108}
109
110@keyframes fadeOut {
111  0% {
112    opacity: 1;
113  }
114  100% {
115    opacity: 0;
116  }
117}
118/*# sourceMappingURL=style.css.map */

js
1// const timerId = setInterval(() => {
2//     const node = document.querySelector('.js-animation:not(.is-show)');
3//     if (node !== null) {
4//         node.classList.add('is-show');
5//     } else {
6//         clearInterval(timerId);
7//     }
8// }, 1000);
9
10// const itemInput = document.querySelector('#itemInput');
11// const saveBtn = document.querySelector('#saveBtn');
12
13// itemInput.addEventListener('keydown', function () {
14//     const node = document.querySelector('#atText');
15//     const max_char = 10;
16//     if (itemInput.value.length > max_char) {
17//         node.classList.remove('none');
18//     } else {
19//         node.classList.add('none');
20//         test();
21//     }
22// });
23
24// saveBtn.addEventListener('click', function () {
25//     if (itemInput.value === '') {
26//         alert('文字を入力してください');
27//     } else if (itemInput.value.length > 10) {
28//         alert('文字数を減らしてください');
29//     } else if (itemInput.value !== '' && itemInput.value.length < 10) {
30//         const node = document.querySelector('#content');
31//         node.classList.add('fadeout');
32//         node.addEventListener('animationend', () => {
33//             node.remove();
34//         })
35//     }
36// });
37
38
39// const test = window.addEventListener('DOMContentLoaded', () => {
40//     const form = document.getElementById('form1');
41//     form.addEventListener('submit', function (e) {
42//         e.preventDefault();
43
44//         const input_name = document.getElementById('itemInput');
45//         console.log('submit:' + input_name.value);
46//     })
47// })
48
49
50const firstForm = document.getElementById('first-form');
51const firstInput = document.getElementById('first-input');
52const firstBtn = document.getElementById('first-btn');
53
54const max_char = 10;
55const fadeOut = document.querySelector('.fadeout');
56
57
58const timerId = setInterval(() => {
59    const js_anime = document.querySelector('.js-animation:not(.is-show)');
60    if (js_anime !== null) {
61        js_anime.classList.add('is-show');
62    } else {
63        clearInterval(timerId);
64    }
65}, 1000);
66
67let test = window.addEventListener('load', () => {
68    firstForm.addEventListener('click', function (event) {
69        event.preventDefault();
70    })
71});
72
73firstInput.addEventListener('keydown', () => {
74    const itemValue = firstInput.value;
75    const atText = document.getElementById('at-text');
76    if (itemValue.length > max_char) {
77        atText.classList.remove('none');
78    } else {
79        atText.classList.add('none');
80    }
81});
82
83firstBtn.addEventListener('click', () => {
84    const itemValue = firstInput.value;
85    if (itemValue !== '' && itemValue.length < max_char) {
86        const content = document.getElementById('first-content');
87        content.classList.add('fadeout');
88        content.addEventListener('animationend', () => {
89            content.remove();
90            //submit解禁
91            test = false;
92        });
93    } else if (itemValue.length > 10) {
94        alert('文字数を減らして下さい');
95    } else {
96        alert('文字を入力してください');
97    }
98});
99
100// function processForm(e) {
101//     if (e.preventDefault) e.preventDefault();
102//     formJudge();
103//     return false;
104// };
105
106// if (firstForm.attachEvent) {
107//     firstForm.attachEvent('submit', processForm);
108// } else {
109//     firstForm.addEventListener('submit', processForm);
110// }

試したこと

preventDefault();を含むwindowを変数に格納して無効化したい箇所でその変数をfalseにした。

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

回答1件

自己解決

ここにevent.preventDefault();を記述したら解決できました。
ただし、これが適切なコードか分かりません。

js
1firstBtn.addEventListener('click', (event) => {
2    const itemValue = firstInput.value;
3    if (itemValue !== '' && itemValue.length < max_char) {
4        const content = document.getElementById('first-content');
5        content.classList.add('fadeout');
6        content.addEventListener('animationend', () => {
7            content.remove();
8            //submit解禁
9        });
10    } else if (itemValue.length > 10) {
11        alert('文字数を減らして下さい');
12        event.preventDefault();
13    } else {
14        alert('文字を入力してください');
15        event.preventDefault();
16    }
17});