creating multiple button using while loop but only first button is responsive when using .onclick function

Question

hi guys i ran in too small issue where i am creating like and dislike function so i created an while loop that created like and dislike for every tag but only the first button are responsive when using .onlick = function

if (mysql_num_rows($res) > 0){
while ($row = mysql_fetch_assoc($res)) {
//blah blah blah
$categories .= "<a href='view_category.php?cid=".$id."' class='cat_links'>".$title." - <font size='-1'>".$description." </a> </font> <div class='rating'><input type='button' id='like1' value='like' /><span id='temp_rating'> ".$rating." </span><input type='hidden' name='cid' id='cid' value='".$id."'/><input type='button' value='dislike' /></div>";
//blah blah blah
}
}

which does this enter image description here

and the my javascript code is

<script src="ajax.js"></script>
<script>
var submitEvent = document.getElementById("like1").onclick = function(){

    likemsg(HTTP);
};

</script>

ajax.js

function likemsg(){
    var temp_rating = 1;
    var cid = encodeURIComponent(document.getElementById('cid').value);

    var url = "category_like_parse.php?temp_rating="+temp_rating+"&cid="+cid;

    alert();

    HTTP.onreadystatechange=function()
    {
        if (HTTP.readyState==4 && HTTP.status==200)
        {
            document.getElementById("temp_rating").innerHTML=HTTP.responseText;
        }
    }

HTTP.open("POST", url ,true);
HTTP.send();

}

and goes to category_like_parse.php saves +1 to database and echo it and it displays it but only for first like button the rest are unresponsive i got to this conclusion because i used alert(); which only worked for the first one and the rest dint. am i doing anything wrong.

So you want only the first button to have the onclick function? — Erick, Apr 11 '15 at 22:14
no i want to have onclick function for all of them but only first one is responsive — WESTKINz, Apr 11 '15 at 22:15
One problem that I see in your code is that you are giving all the input tags the same ID (like1). Do you know how to fix that? I think that might be causing some problems for you — Erick, Apr 11 '15 at 22:18
If you need pure javascript answers, don't tag jquery, or else "jQuery brigade" shall jump the guns while providing answers ;) — Mohd Abdul Mujib, Apr 11 '15 at 23:18
i don't know it was recommended in tag section so i just did it. — WESTKINz, Apr 11 '15 at 23:23

score 3 · Accepted Answer · answered Apr 11 '15 at 22:22

3

that's because you're creating number of buttons with the same id and that is invalid because id must be unique.

instead assign name to like buttons.

<input type='button' id='like1' name='like' value='like' />

var likeBut= document.getElementsByName("like");
for(var i=0;i<likeBut.length;i++){
   likeBut[i].onclick = function(){
      likemsg(HTTP);
   }
}

answered Apr 11 '15 at 22:22

Omar Elawady

3,300
1
13
17

yes thank you its working i will do more testing before accepting this answer just to see if this created any bug – WESTKINz Apr 11 '15 at 22:26
yes working just created a glitch where it only saves it at the top like and dislke so im guess i have to use getelementbyname for all them and it should work fine :) – WESTKINz Apr 11 '15 at 22:33

score 2 · Answer 2 · edited May 23 '17 at 12:07

In the DOM - IDs of elements are unique identifiers of elements.

When you perform a getElementById it only returns the first element. So you should select them by class or another property instead:

// select all buttons inside something with class=rating
var buttons = document.querySelectorAll(".rating input[type=button]");

// add handlers

for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(){
          alert("Clicked!");
    };
}

Beware of the closure/loop problem and prefer addEventListener to onclick.

creating multiple button using while loop but only first button is responsive when using .onclick function

2 Answers2

Linked