doucai7294
doucai7294
2015-04-11 22:12

使用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 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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • dsen53898 dsen53898 6年前

    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);
       }
    }
    
    点赞 评论 复制链接分享
  • drr7731 drr7731 6年前

    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.

    点赞 评论 复制链接分享

相关推荐