создание нескольких кнопок с использованием цикла while, но только первая кнопка реагирует при использовании функции .onclick

Привет, ребята, я столкнулся с слишком маленькой проблемой, когда создаю функцию вроде нелюбовь, поэтому я создал цикл while, который создавал и не нравился для каждого тега, но только первая кнопка реагирует при использовании .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 } } 

который делает это введите описание изображения здесь

и мой javascript-код

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

и переходит в категорию_like_parse.php, сохраняет +1 к базе данных и эхо его, и он отображает его, но только для первой, как кнопка, остальные не реагируют, я пришел к такому выводу, потому что я использовал alert (); который работал только для первого и остальных. я делаю что-то неправильно.

это потому, что вы создаете количество кнопок с одним и тем же идентификатором, и это неверно, потому что идентификатор должен быть уникальным.

вместо этого назначьте имена похожим кнопкам.

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

В DOM-идентификаторах элементы являются уникальными идентификаторами элементов.

Когда вы выполняете getElementById он возвращает только первый элемент. Поэтому вы должны выбрать их по классу или другому свойству:

 // 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!"); }; } 

Остерегайтесь проблемы закрытия / цикла и предпочитайте addEventListener .