innerHTML null on a javascript button in php

Question

I've got a button that calls a javascript function inside a PHP fucntion:

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

Here's the line of code where the Chrome console prints an innerHTML null error:

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

Note: the $rownNr is successfully retrieved by the php code, the console prints it so I'm sure the following JS function gets it correctly:

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

        });

}

When i click on the upvoteCommentButt, the function calls a PHP script and successfulòly executes the query, but when it comes to change the innerHTML number of the commentVotesTxt tag, it prints this error out:

Uncaught TypeError: Cannot set property 'innerHTML' of null at Object.success (comments.php?topicID=G1bYixk6B3&topicUserID=vP1zbupMBJ&option=latest:579)

What am I doing wrong?

Thanks!

Answer 1

This looks wrong. You have put the closing " for ID before the $rowNr. So all the span have the same id "commentVotesTxt".

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

it should be like

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