php中javascript按钮上的innerHTML null

Question

我有一个在 PHP 函数中调用 javascript 函数的按钮：

<button id="upvoteCommentButt"'.$rowNr.'" class="btn btn-primary btn-sm" onclick="upvoteComment(\''.$commentID.'\', \''.$rowNr.'\')">

这是 Chrome 控制台打印 innerHTML null 错误的代码行：

echo '<span class="p" id="commentVotesTxt"'.$rowNr.'>&nbsp;&nbsp; '.$commentVotes.' &nbsp;&nbsp;</span>';

注意：$rownNr 已被 php 代码成功检索，控制台会打印出来，所以我确信以下 JS 函数可以正确获取：

function upvoteComment(commentID, rowNr) {
    var rowNr = rowNr;

    $.ajax({
        url:"vote-comment.php?isUpvoted=true&commentID=" + commentID, 
        type: "GET", 

            success:function(data) {
                var results = data;  
                console.debug(results);

                document.getElementById("debug").innerHTML = 'VOTES: ' + results + ' -- rowNr: ' + rowNr;

                // Show updated votes
                console.debug("ROW NR: " + rowNr);

                document.getElementById("commentVotesTxt" + rowNr).innerHTML = "  " + results + "  ";

                // Change buttons style
                $( "#upvoteCommentButt" + rowNr ).removeClass( "btn-default" ).addClass( "btn-primary" );
                $( "#downvoteCommentButt" + rowNr ).removeClass( "btn-primary" ).addClass( "btn-default" );

            }, error: function (xhr) {
                document.getElementById("debug").innerHTML = xhr.status;

                if(xhr.status == 418){
                    document.getElementById("errorMessage").innerHTML = "<strong>You already upvoted this comment</strong>";
                    document.getElementById("errorAlert").style.display = 'block';

                } else if (xhr.status == 417){
                    document.getElementById("errorMessage").innerHTML = "<strong>You cannot vote your own comments!</strong>";
                    document.getElementById("errorAlert").style.display = 'block';
                }

                // hide errorAlert
                $("#errorAlert").fadeTo(2000, 500).slideUp(500, function(){
                $("#errorAlert").slideUp(500);
                    document.getElementById("errorMessage").innerHTML = "";
                });
            }

        });

}

当我点击upvoteCommentButt 时，该函数调用一个PHP 脚本并成功执行查询，但是当涉及到更改commentVotesTxt 标记的innerHTML 编号时，它会打印出此错误：

未捕获的类型错误：无法在 Object.success 处设置属性“innerHTML”为 null (cmets.php?topicID=G1bYixk6B3&topicUserID=vP1zbupMBJ&option=latest:579)

我做错了什么？

谢谢！

Answer 1

这看起来不对。您已将 ID 的结尾 " 放在 $rowNr 之前。所以所有span 都有相同的id "commentVotesTxt"。

echo '<span class="p" id="commentVotesTxt"'.$rowNr.'>&nbsp;&nbsp; '.$commentVotes.' &nbsp;&nbsp;</span>';

应该是这样的

echo '<span class="p" id="commentVotesTxt'.$rowNr.'">&nbsp;&nbsp; '.$commentVotes.' &nbsp;&nbsp;</span>';