CODEWITHSUNDEEP
phpjquery
Debraj Ghosh
Debraj Ghosh

Reputation: 11

How to Click many buttons by jquery for loop

I'm trying to call many button by one jquery function. following is my html and php code:

Elements of button:

    for($q_no=1;$q_no<=30;$q_no++){
            echo('<button class="q_no_btn" id="'.$q_no.'">Question no '.$q_no.'</button>');
        }

My Jquery code:

$(document).ready(function(){
    var q_no;
    for(q_no=1;q_no<=30;q_no++){
        $("#"(q_no).click(function(){
            alert("Click on 1!!!");
    
        }))
    }
});

I'm poping up the content to popup box, by clicking on the buttons.

please help.

Upvotes: 1

Views: 43

Answers (2)

Lajos Arpad
Lajos Arpad

Reputation: 77002

loop

We are using the fact that let is used for defining block-scoped variables to our advantage. We create a q_no variable using let in our for and define the click function inside this block, so each handler will have its own, correct q_no.

let buttons = "";
for (let q_no = 1; q_no <= 30; q_no++) {
    buttons += '<button class="q_no_btn" id="' + q_no + '">Question no ' + q_no + '</button>';
}

document.body.innerHTML = buttons;

for (let q_no = 1; q_no <= 30; q_no++) {
    $("#" + q_no).click(function() {
        alert("Click on " + q_no);
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

loop is not even needed

let buttons = "";
for (let q_no = 1; q_no <= 30; q_no++) {
    buttons += '<button class="q_no_btn" id="' + q_no + '">Question no ' + q_no + '</button>';
}

document.body.innerHTML = buttons;

$(".q_no_btn").click(function(obj, index) {
    console.log(1 + $(this).index());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

In Javascript, indexing starts from 0, so we add 1 to it.

Without jQuery

    let buttons = "";
    for (let q_no = 1; q_no <= 30; q_no++) {
        buttons += '<button class="q_no_btn" id="' + q_no + '">Question no ' + q_no + '</button>';
    }

    document.body.innerHTML = buttons;
    
    let items = [...document.getElementsByClassName("q_no_btn")];
    
    for (let item of items) {
        item.addEventListener("click", function() {
            alert(items.indexOf(item) + 1);
        });
    }

Upvotes: 1

ashbringer
ashbringer

Reputation: 103

You have misspelled when calling your id parameter with jQuery.

If you change the $("#"(q_no) field as below, the problem will be solved. Also, you wrote one extra bracket.

$(document).ready(function(){
    var q_no;
    for(q_no=1;q_no<=30;q_no++){
        $("#"+q_no).click(function(){
            alert("Click on 1!!!");
        });
    }
});

Also you can use below code, you no need to use loop in jquery.

$(".q_no_btn").on('click',function(){
    var ids = $(this).attr("id");
    alert("Click on "+ ids +"!!!");
});

Upvotes: 1

Related Questions