使用while循环创建多个按钮，但只有第一个按钮在使用.onclick函数时才会响应

问题描述：

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

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.

大家好我跑得太小了我在创造喜欢和不喜欢的功能，所以我创建了一个创建的while循环喜欢和不喜欢每个标签，但只有第一个按钮响应时使用.onlick = function p>

  if（mysql_num_rows（$ res）＆gt; 0）{
while（$ row）  = mysql_fetch_assoc（$ res））{
 // blah blah blah 
 $ categories。=“＆lt; a href ='view_category.php？cid =”。$ id。“'class ='cat_links'＆gt;”。  $ title。“ - ＆lt; font size =' -  1'＆gt;”。$ description。“＆lt; / a＆gt;＆lt; / font＆gt;＆lt; div class ='rating'＆gt;＆lt; input type ='button'  id ='like1'value ='like'/＆gt;＆lt; span id ='temp_rating'＆gt;“。$ rating。”＆lt; / span＆gt;＆lt; input type ='hidden'name ='cid'id ='  cid'value ='“。$ id。”'/＆gt;＆lt; input type ='button'value ='dislike'/＆gt;＆lt; / div＆gt;“; 
 // blah blah blah 
} 
  } 
  code>  pre> 
 
 这样做
  p> 
 
 
我的javascript代码是 p> 
 
 
 ＆lt; script src =“ajax.js”＆gt;＆lt; / script＆gt; 
＆lt; script＆gt; 
var submitEvent = document.getElementById（“like1”）。onclick = function（）{
 
 likemsg（HTTP  ）; 
}; 
 
＆lt; / script＆gt; 
  code>  pre> 
 
  ajax.js  p> 
 
 
  function likemsg  （）{
 var temp_rating = 1; 
 var cid = encodeURIComponent（document.getElementById（'cid'）。value）; 
 
 var url =“category_like_parse.php？temp_rating =”+ temp_rating +“＆amp; cid  =“+ cid; 
 
 alert（）; 
 
 HTTP.onreadystatechange = function（）
 {
 if if（HTTP.readyState == 4＆amp;＆amp;  HTTP.status == 200）
 {
 document.getElementById（“temp_rating”）。innerHTML = HTTP.responseText; 
} 
} 
 
HTTP.open（“POST”，url，true）; \  nHTTP.send（）; 
 
} 
  code>  pre> 
 
 并转到category_like_parse.php将+1保存到数据库并回显它并显示它但仅用于第一次 像按钮，其余的都没有反应我得到了这个结论，因为我使用alert（）; 这只适用于第一个和其余的工作。 我做错了什么。 p> 
  div>

答

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

答

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.

使用while循环创建多个按钮，但只有第一个按钮在使用.onclick函数时才会响应

相关推荐