다른 입력 상자에서 동일한 경고 상자를 여러 번 사용하려면 어떻게해야합니까?

Question

3 개의 다른 input에 대해 동일한 경고 상자를 사용하려고 했으므로 class과 getElementsByClassName으로 변경하려고 시도했지만 작동하지 않습니다.

Answer 1

"이 바보지만 작동하는 경우, 바보 아니다"

var input = document.getElementById('notif'); 
 
    \t var alert = document.getElementById('alert'); 
 
    
 
    \t notif.addEventListener('focus', function() { 
 
    \t alert.classList.add('in'); 
 
    
 
    \t setTimeout(function() { 
 
    \t  alert.classList.remove('in'); 
 
    \t }, 4000); 
 
    \t }); 
 
    
 
    \t notif.addEventListener('blur',function(){ 
 
    \t alert.classList.remove('in') 
 
    \t });

<div id="alert" class="alert alert-warning fade"> 
 
\t <a href="#" class="close" data-dismiss="alert" aria-label="close" style="text-decoration: none">&times;</a> 
 
\t Warning: Please don't 
 
</div> 
 

 
<div> 
 
    \t <span> 
 
    \t \t <input id="notif" type="text" class="form-control date" value="Blah blah"> 
 
    \t </span> 
 
    \t <span> 
 
    \t \t <input type="text" class="form-control date" value="Pew pew"> 
 
    \t </span> 
 
    \t <span> 
 
    \t \t <input type="text" class="form-control" value="Pak kapow"> 
 
    \t </span> 
 
    </div>

을 :

이

경고가 D : 클래스 도와주세요 <input type="text" class="form-control date notif" value="Blah blah">이기 때문에 나는 그것을 시도 할 때 내가 무슨 짓을

-murphy

var input = document.getElementById('notif'); 
     var alert = document.getElementById('alert'); 

     notif.addEventListener('focus', function() { 
      alert.classList.add('in'); 

      setTimeout(function() { 
      alert.classList.remove('in'); 
      }, 4000); 
     }); 

     notif.addEventListener('blur',function(){ 
      alert.classList.remove('in') 
     }); 
var input = document.getElementById('notif2'); 
      var alert = document.getElementById('alert'); 

      notif2.addEventListener('focus', function() { 
       alert.classList.add('in'); 

       setTimeout(function() { 
       alert.classList.remove('in'); 
       }, 4000); 
      }); 

      notif2.addEventListener('blur',function(){ 
       alert.classList.remove('in') 
      }); 

등등

<div> 
     <span> 
      <input id="notif" type="text" class="form-control date" value="Blah blah"> 
     </span> 
     <span> 
      <input id="notif2" type="text" class="form-control date" value="Pew pew"> 
     </span> 
     <span> 
      <input id="notif3" type="text" class="form-control" value="Pak kapow"> 
     </span> 
    </div>