doucai7294
2015-04-11 22:12
浏览 222

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

图片转代码服务由CSDN问答提供 功能建议

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

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

这样做

我的javascript代码是

 &lt; script src =“ajax.js”&gt;&lt; / script&gt; 
&lt; script&gt; 
var submitEvent = document.getElementById(“like1”)。onclick = function(){
 
 likemsg(HTTP  ); 
}; 
 
&lt; / script&gt; 
   
 
 

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

并转到category_like_parse.php将+1保存到数据库并回显它并显示它但仅用于第一次 像按钮,其余的都没有反应我得到了这个结论,因为我使用alert(); 这只适用于第一个和其余的工作。 我做错了什么。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dsen53898 2015-04-11 22:22
    已采纳

    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 2015-04-11 22:18

    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.

    点赞 打赏 评论

相关推荐 更多相似问题