Sweet Alert box i add 4 buttons onely one button is working

Sweet Alert box I add 4 buttons only one button is working. The 4 buttons pointing to the same box and same div the problem is the first button when we click, the popup comes the second button popup not coming how to fix this issue?

JS:

document.querySelector('ul.examples li.input button').onclick = function(){
    swal({
        title: "An input!",
        text: 'Write something interesting:',
        type: 'input',
        showCancelButton: true,
        closeOnConfirm: false,
        animation: "slide-from-top",
        inputPlaceholder: "Write something",
    },
    function(inputValue){
        if (inputValue === false) return false;

        if (inputValue === "") {
            swal.showInputError("You need to write something!");
            return false;
        }

        swal("Nice!", 'You wrote: ' + inputValue, "success");

    });
};

HTML:

    <html>
      <head>
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">

      </head>
      <body>

      <ul class="examples">
        <li class="input"> <div class="ui"> <button> 1 </button> </div> </li> <br> 
        <li class="input"> <div class="ui"> <button> 2 </button> </div> </li> <br> 
        <li class="input"> <div class="ui"> <button> 3 </button> </div> </li> <br> 
        <li class="input"> <div class="ui"> <button> 4 </button> </div> </li> <br> 
        </ul>
      </body>
    </html>

<!-- end snippet -->

Answers 1

  • use querySelectAll please.

     Array.prototype.forEach.call(document.querySelectorAll('ul.examples li.input button'),function(button){
           
            button.onclick = function(){
                swal({
                        title: "An input!",
                        text: 'Write something interesting:',
                        type: 'input',
                        showCancelButton: true,
                        closeOnConfirm: false,
                        animation: "slide-from-top",
                        inputPlaceholder: "Write something",
                    },
                    function(inputValue){
                        if (inputValue === false) return false;
    
                        if (inputValue === "") {
                            swal.showInputError("You need to write something!");
                            return false;
                        }
    
                        swal("Nice!", 'You wrote: ' + inputValue, "success");
    
                    });
            }
        });
    
    
    
    
    
     
     
    <html>
    <head>
    
     
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
    
    
    
    
    </head>
    
    <body>
     
    <ul class="examples">
    
    
    	<li class="input"> <div class="ui"> <button> 1 </button> </div> </li> <br> 
    	<li class="input"> <div class="ui"> <button> 2 </button> </div> </li> <br> 
    	<li class="input"> <div class="ui"> <button> 3 </button> </div> </li> <br> 
    	<li class="input"> <div class="ui"> <button> 4 </button> </div> </li> <br> 
    
    
    	
    </ul>
    
    
    
    </body>
     
     
     
    
     
     
    </html> 


Related Articles