0 / 0 / 1
Регистрация: 27.05.2018
Сообщений: 2
1

Не вызывается функция

28.05.2018, 11:45. Показов 663. Ответов 2
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Всем привет. Вот мой код https://jsfiddle.net/ueagLh0d/
Требуется удалить класс shake у инпута через ~1сек после нажатия кнопки. Написал функцию classDelete и нужно ее вызвать. Никак не получается её вызвать. Подскажите в чем проблема. Спасибо

Вот код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div>
    <div>
        <form>
          <input class="animated" name="email" placeholder="email">
          <input class="animated" name="phone" placeholder="номер телефона">
          <input class="animated" type="text" placeholder="имя">
          <input type="submit" value="послать">
          <span id="r1">testing</span>
        </form>
    </div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
var inputs = document.querySelectorAll("div div form input"),
                mail,
                phone,
                name,
                r1 = document.querySelector("#r1"),
                pic1 = document.querySelectorAll("#sl1 div img"),
                pic2 = document.querySelectorAll("#sl2 div img"),
                pic1buttons = document.querySelectorAll("#sl1 input"),
                pic2buttons = document.querySelectorAll("#sl2 input"),
                time1 = 0,
                time2 = 1000,
                regmail = /[a-zA-Z0-9\.-_]{3,}@[a-zA-Z\.]{3,}[a-zA-Z]{2,}/,
                // регулярка мною написаная на проверку валидности e-mail 
                regphone = /\d{6,}/;
                    // простая регулярка для телефона
                                
                
                //Задача убрать класс shake у инпута через ~секунду после нажатия кнопки
            var classDelete = function (a, b) {
                console.log(b, a);
                setTimeout(function(a, b) {
                    b.classList.remove(a)
                    console.log(b, a);
                }, 1200);
            }
 
            // функция валидации формы
            document.querySelector("body div div form").onsubmit = function(e) {
                for (var i = 0; i < (inputs.length); i++) {
                    mail = inputs[0].value,
                    phone = inputs[1].value,
                    name = inputs[2].value;
                    if (regmail.test(mail)) {
                        inputs[0].classList.remove("err", "shake");
                        classDelete("shake", inputs[0]);
                        mail = true;
                    } else {
                        inputs[0].classList.add("err", "shake");
                        mail = null;
                    }
                    if (regphone.test(phone)) {
                        inputs[1].classList.remove("err", "shake");
                        phone = true;
                    } else {
                        inputs[1].classList.add("err", "shake");
                        phone = null;
                    }
                    if (name.length > 2) {
                        inputs[2].classList.remove("err", "shake");
                        name = true;
                    } else {
                        inputs[2].classList.add("err", "shake");
                        name = null;
                    }
                }
                if (mail && phone && name) {
                    r1.innerHTML = "Проход";
                    e.preventDefault();
                } else {
                    r1.innerHTML = "Не проход";
                    e.preventDefault();
                }
            }
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.err {
    background-color: rgba(203, 116, 116, 0.19);
    border-color: red;
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}
@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
 
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
 
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
 
* {
  font-size: 20px;
  overflow: hidden;
  box-sizing: border-box;
}
div form {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
form input {
    flex: 0.1 0 auto;
    border: 2px solid rgba(163, 152, 152, 0.29); 
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.05.2018, 11:45
Ответы с готовыми решениями:

Не вызывается функция js
изучаю javascript только... Решил написать простенькую программу по подбору ПК комплектующих....

Почему эта функция вызывается по созданию элемента, а не по клику?
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot; /&gt; &lt;title&gt;function...

Почему функция не вызывается
Здравствуйте. Начинаю изучать JavaScript, еще многого не понимаю В данном случае, не понимаю...

Функция вызывается несколько раз
Всем привет, имеется код: function showEdit(param) // Функция для отображения редактируемого...

2
129 / 112 / 39
Регистрация: 27.09.2012
Сообщений: 305
28.05.2018, 14:17 2
Мне вообще не очень нравится написанный код, зачем цикл от которого ничего не зависит, просто выполняется несколько одинаковых действий.
По сабжу, вот так можно записать

Javascript
1
2
3
4
5
6
7
            var classDelete = function (a, b) {
                console.log(b, a);
                setTimeout(function(a, b) {
                    b.classList.remove(a)
                    console.log(b, a, "work");
                }, 1200, a,b);
            }
Или из анонимной фнкции вызывать:

Javascript
1
2
3
4
5
6
7
8
9
var classDelete = function (a, b) {
    console.log(b, a);
    function remove(a,b) {
        b.classList.remove(a)
        console.log(b, a, "work");
    }
    setTimeout(function() { remove(a,b)  }, 1200);
 
}
1
0 / 0 / 1
Регистрация: 27.05.2018
Сообщений: 2
28.05.2018, 15:05  [ТС] 3
Проблема решена следующим образом: Вызов функции перенесен в поле else, и изменил саму вызываемую функцию так.
Javascript
1
2
3
4
5
6
function classDelete(a, b) {
                setTimeout(function() { 
                    b.classList.remove(a);
                    console.log("work");
                }, 1000);
            }
обновленный пример в песочнице https://jsfiddle.net/ueagLh0d/2/
0
28.05.2018, 15:05
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.05.2018, 15:05
Помогаю со студенческими работами здесь

Почему не вызывается функция, поставленная на eventListener
Добрый день :yes: Начинаю учить JavaScript по вот этому видео, и не понимаю, почему функция не...

Не вызывается функция при нажатии кнопки
Добрый день господа программисты:) У меня возникла весьма не понятная ошибка, без вашей помощи не...

Не вызывается функция с вложенными циклами в onclick из подключенного файла
Есть код Или здесь &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;button class=&quot;TableButton&quot;&gt; ...

Не вызывается функция
Здравствуйте, вот какая проблема. В этом методе p.repaint() не вызывается, все остальное работает. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru