Задать вопрос

FlameJoy

Ответы

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

    @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>');
}


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