如何使用不同的输入框多次使用相同的警报框？

Question

我想为3个不同的input使用相同的提示框，因此我尝试将其更改为class和getElementsByClassName，但它不起作用。我在课堂上尝试时所做的是<input type="text" class="form-control date notif" value="Blah blah">请帮助：D

警报：

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

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

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

Answer 1

＆＃34;如果它很愚蠢但它有效，那就不是傻了＆＃34;

-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>