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 = "&nbsp;&nbsp;" + results + "&nbsp;&nbsp;";

                // 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!

rrk · Accepted Answer · 2017-10-24 12:09:34Z

4

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>';

answered Oct 24, 2017 at 12:09

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Frank Eno Over a year ago

You saved my day in less than a minute, thanks! I knew it was a stupid error like some missing " or ', it's always like that after all :)

Frank Eno Over a year ago

I'll accept your answer in 8 minutes (i cannot do that now, that's what stackoverflow says :)

rrk Over a year ago

@fvimagination happens to the best of us. Happy coding.

Frank Eno Over a year ago

Yep, the funny thing is that I've spent 2 days trying to figure out what was wrong, now I finally can jump into the shower :LOL:

Collectives™ on Stack Overflow

innerHTML null on a javascript button in php

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related