Как привязать 2-х и более события на один элемент?

Question

FlameJoy @FlameJoy

JavaScript

Как привязать 2-х и более события на один элемент?

Есть форма с полем и кнопкой:

<!DOCTYPE html>
<html>
  
  <body>
   
    <div>
      <form>

      <input type = "text" name = "pass" id = "pass_id" placeholder = "Пароль" required maxlength = "10" pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"><br>
<p id = "error_id" class = "error"></p>

      <button id = "button" >OK</button>
      
      <button class = "close" onclick="alertClose()">Close</button>
        
      </form>
    </div>
    
  </body>
</html>

и два события:

function validation() {
    var txt = "";
     if (document.getElementById("pass_id").validity.tooLong) {
        txt = "";
     }
   document.getElementById("error_id").innerHTML = txt;
 
}

function table(){
  var pass = document.getElementById('pass_id').value;

  document.write(pass)
}

Собственно как сделать так, чтобы сначала прошла валидация, а потом, если валидация успешна, значение было записано через write?

P.S Я так понимаю нужно делать через обработчик событий add/removeEventListener, но в силу нубства не понимаю как сделать так чтобы запись формировалась только при успешной валидации. Работает лишь что-то одно.

Вопрос задан более трёх лет назад
182 просмотра

2 комментария

Подписаться 1 Простой 2 комментария

drawnofmymind @drawnofmymind

Может вызывать функцию внутри другой функции?

Написано более трёх лет назад
Andrew @KickeRocK
Странная у вас функция валидации, но я бы писал так, чтобы функция валидации возвращала true/false и сама светила все нужные error-поля и сделал бы глобальную функцию сабмита. покажу примерно, надеюсь, сами допишите.

var form = document.querySelector('form'); form.addEventListener('submit',function(e){ e.preventDefault(); if(validation(e)){ table(); } }) function validation(e) { e.target.querySelectorAll('input').forEach(function(el){ if(!el.value){ el.classList.add('invalid'); return false } else{ el.classList.remove('invalid') } return true }) } function table(){ var pass = document.getElementById('pass_id').value; document.write(pass) }
Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

1 комментарий

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 13 часов назад
- 89 просмотров
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 19 часов назад
- 87 просмотров
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- вчера
- 594 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 22 нояб.
- 70 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 22 нояб.
- 40 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 22 нояб.
- 34 просмотра
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 148 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- 20 нояб.
- 187 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 86 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 58 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Обновить дизайн карты метро Москвы

24 нояб. 2024, в 13:04

500 руб./в час

Сделать сайт на Tilda

24 нояб. 2024, в 12:29

3000 руб./за проект

Сделать 5 видеобэкграундов для выступления детей

24 нояб. 2024, в 12:25

500 руб./за проект

Может вызывать функцию внутри другой функции?
Странная у вас функция валидации, но я бы писал так, чтобы функция валидации возвращала true/false и сама светила все нужные error-поля и сделал бы глобальную функцию сабмита. покажу примерно, надеюсь, сами допишите.

var form = document.querySelector('form'); form.addEventListener('submit',function(e){ e.preventDefault(); if(validation(e)){ table(); } }) function validation(e) { e.target.querySelectorAll('input').forEach(function(el){ if(!el.value){ el.classList.add('invalid'); return false } else{ el.classList.remove('invalid') } return true }) } function table(){ var pass = document.getElementById('pass_id').value; document.write(pass) }

Answer 1 · 2020-04-16 16:52:49

Можно сделать что бы функа validation что нибудь возвращала и вызывать table в if

element.addEventListener('click', function(event) {
  event.preventDefault();
  let isValid = validation();
  if(isValid ) table()
})
function validation() {
  let valid = false;
  var txt = "";
  if (document.getElementById("pass_id").validity.tooLong) {
    txt = "";
    valid = true;
  }
  document.getElementById("error_id").innerHTML = txt;
  return valid;
}

function table(){
  var pass = document.getElementById('pass_id').value;

  document.write(pass)
}

Answer 2 · 2020-04-16 19:22:19

Попробовал, использовать метод addEventListener, вроде все переписал верно, но увы все так же не работает, скорее всего я накосячил в коде:

Это html-форма, тут самое важное поле с вводом пароля:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel = "stylesheet" href = "style.css">
    <meta charset = "utf-8">
  </head>
  
  <body>
    
    <div id = "hide">
      
      <h2>Форма </h2>
      <form>
      <input type = "text" name = "user" id = "user_id" placeholder = "Логин" required maxlength = "100"><br>
      
      <input type = "text" name = "pass" id = "pass_id" placeholder = "Пароль" required maxlength = "10" pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"><br>
      <p id = "error_id" class = "error"></p>
      
      <button id = "button" class = "close">OK(Валидация+Таблица)</button>
      
      <button class = "close" onclick="alertClose()">Close</button>
        
      </form>
    </div>
    
    <a href = "javascript:openForm()">Вызов формы</a>
    
   <script src = "function.js"></script>

    
  </body>
</html>

JS код сделал так:

button.addEventListener('click', function (event) {
  
  let isValid = validation();
  if(isValid ) table()
})

function openForm(){
  document.getElementById('hide').style.display = 'block';
}

function alertClose(){
 confirm('Вы уверены? Данные будут утеряны.');
  if(true){
    document.getElementById('hide').style.display = 'none';
    
  }
  if(false){
    document.getElementById('hide').style.display = 'block';
  }
}

 function validation() {
   let valid = false
    var txt = "";
     if (document.getElementById("pass_id").validity.tooLong) {
        txt = "";
       valid = true;
     }
   document.getElementById("error_id").innerHTML = txt;
   return valid;
}

function table(){
  var user = document.getElementById('user_id').value;
  var pass = document.getElementById('pass_id').value;
  var service = document.getElementById('service_id').value;
  var date = document.getElementById('date_id').value;

document.write('<style>td{font-size:20px;}th{text-align:left;font-size:30px;}</style>');
	
	document.write('<table cellpadding = "7" border = "2" width = "50%">');
  
  document.write('<th>Логин</th><th>Пароль</th><th>Услуга</th><th>Дата</th>')
	
	document.write('<tr><td>'+user+'</td><td>'+pass+'</td><td>'+service+'</td><td>'+date+'</td></tr>')
	
	document.write('</table>');
}

Ткните где косяк, пожалуйста.

Как привязать 2-х и более события на один элемент?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт