Задать вопрос
@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, но в силу нубства не понимаю как сделать так чтобы запись формировалась только при успешной валидации. Работает лишь что-то одно.
  • Вопрос задан
  • 154 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 2
@En-Tilza
Можно сделать что бы функа 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)
}
Ответ написан
1 комментарий
1 комментарий
@FlameJoy Автор вопроса
Попробовал, использовать метод 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>');
}


Ткните где косяк, пожалуйста.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Senior Fullstack JavaScript Node.js + React
Simplenight inc.
от 4 000 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Название проекта: Бот Telegram для автоматизации судебных приказов
05 мая 2024, в 02:15
30000 руб./за проект
Десктоп приложение для добавления товаров на Python
05 мая 2024, в 01:43
5000 руб./за проект
Разработка 3D моделей
05 мая 2024, в 01:37
1500 руб./за проект
Ещё заказы