How to add buttons in an array and loop through them?

Question

Got a bunch of letter buttons in code below:

Code:

<?php
    $a = range("A","Z");
?>

<table id="answerSection">
    <tr>

<?php
    $i = 1;
    foreach($a as $key => $val){
        if($i%7 == 1) echo"<tr><td>";
        echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\">";      
        if($i%7 == 0) echo"</td></tr>";
        $i++;
    }
?>
    </tr>
</table>

Now the code below is able to turn on an answer button:

Code:

function addwindow(btn) { 
$('#answer'+btn).addClass("answerBtnsOn");
}

But the only problem is that the code above is only able to turn on a single answer button on only. For example if the "Answer" is B, then it will look for button "#answerB" and turn on that button which is button B. or if the "Answer" is E, then it will look for button "#answerE" and turn on that button which is button E.

The problem is that if there are multiple answers. If the "Answer" is B E, then it does not turn on buttons B and E. This is because it is trying to find button "#answerBE" which is incorrect, it should be looking for button "#answerB" and button "#answerE" and turn them both on.

Another example is if "Answer" is A D F, it doesn't turn on buttons A D and F because it is trying to find button "#answerADF" which is incorrect, it should be looking for button "#answerA", button "#answerD", and button "#answerF" and turn them all on.

So my question is that how can I turn on multiple buttons if there are multiple Answers? Do I need to put all the buttons in an array and loop through them so that it is able to go through all the buttons and turn on those buttons which should be turn on?

UPDATE:

Below is the "Add" button which calls on the addwindow() function and above the add button is the "Answer" column where it displays rows of Answers

   echo '<td class="noofanswerstd">'.htmlspecialchars($searchNoofAnswers[$key]).'</td>';
    echo "<td class='addtd'><button type='button' class='add' onclick=\"parent.addwindow('$searchAnswer[$key]');\">Add</button></td></tr>";

Can you show us a working demo? And, incidentally, your PHP is server-side. jQuery, and all JavaScript (with the exception of node.js) runs client-side. Show us the generated HTML. And a demo. — David Thomas
– David Thomas, Commented Jul 8, 2012 at 16:28

Engineer · Accepted Answer · 2012-07-08 16:45:44Z

1

I believe,you need this:

function addwindow(btn) { 
    var answers = $.map(btn.split(''),function(chr){   return "#answer"+chr;  }).join(', ');
    $(answers).addClass("answerBtnsOn");
}

Explanation:

btn.split('')   //splits btn string into char's array, 
                //  e.g. "ADE" will become ["A","D","E"]
$.map           //converts ["A","D","E"] 
                //  to ["#answerA","#answerD","#answerE"]
join(',')       //makes "#answerA, #answerD, #answerE" string 
                //  from ["#answerA","#answerD","#answerE"] array

edited Jul 8, 2012 at 16:45

answered Jul 8, 2012 at 16:38

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ram · Accepted Answer · 2012-07-08 16:49:33Z

1

try this:

function addwindow(btn) { 
   var arr = btn.split("");
   $.each(arr, function(i, v) {
      $('#answer' + v).addClass("answerBtnsOn");
   })
}

jQuery.each()

edited Jul 8, 2012 at 16:49

answered Jul 8, 2012 at 16:38

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

Robert · Accepted Answer · 2012-07-08 17:18:37Z

0

It sounds like you are passing the 'btn' variable as a string. This is acceptable if you are able to split() the string and then use a for() loop to loop through the resulting array and assign the appropriate class(es).

function addwindow(btn){
    var answers = btn.split(''); // leave empty if values are not separated by a delimiter
    for(var i=0; i < answers.length; i++){
        $('#answer'+answers[i]).removeClass('answerBtnsOff').addClass('answerBtnsOn');
    }
}

Depending on your delimiter, you would want to modify the following code:

btn.split(''); // no delimiter
btn.split(' '); // space delimiter
btn.split(','); // comma delimiter
btn.split('|'); // pipe delimiter

It also appears that you are escaping your quotes but that is not necessary if you are also using concatenation.

Note: Unlike the double-quoted and heredoc syntaxes, variables and escape sequences for special characters will not be expanded when they occur in single quoted strings.

<?php
    $i = 1;
    foreach($a as $key => $val){
        echo ($i % 7 == 1 ? "<tr><td>" : "");
        echo '<input type="button" onclick="btnclick(this);" value="'.$val.'" id="answer'.$val.'" name="answer'.$val.'Name" class="answerBtns answers answerBtnsOff">";      
        echo ($i % 7 == 0 ? "</td></tr>" : "";
        $i++;
    }
?>

edited Jul 8, 2012 at 17:18

answered Jul 8, 2012 at 16:35

Robert

8,7672 gold badges29 silver badges34 bronze badges

2 Comments

user1490145 Over a year ago

Hi, tried your code but it still doesn't turn on buttons if there are multiple answers. I tested it as I added the row which has the answer "A C", but button A and button C did not turn on

Robert Over a year ago

@user1490145 - See edit made. My code was structured for a different delimiter initially, however, you can modify your instance to use the applicable delimiter so that the string can be separated properly.

Collectives™ on Stack Overflow

How to add buttons in an array and loop through them?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related