Javascript not changing html content

Question

I am trying to use innerHTML of javascript in order to edit html elements but it isn't working as it should. The code:

if($postSQL->num_rows > 0){
                                $postSQL->bind_result($userID,$userName, $postID, $desc, $image, $date);
                                $postSQL->fetch();
                                echo $userName."".$desc."".$date."".$image;
                                echo "<script>
                                    document.getElementById('userName').innerHTML=$userName;
                                    document.getElementById('description').innerHTML=$desc;
                                    document.getElementById('date').innerHTML=$date;                                 
                                 </script>";
                            }

I noticed that when I try to change 'userName' using an int type variable, it works. So if I do like this:

document.getElementById('userName').innerHTML=$date;

It works but it won't do the same for string type variables.

show us your SQL data and also the html. hard guess, parse the date or simply try ='hello world' isntead of $date to narrow down if the issue is the variable or not. — zangab
– zangab, Commented Jan 20, 2023 at 11:37

DamiToma · Accepted Answer · 2023-01-20 11:39:45Z

1

The issue here is strings need quotes to work properly. Assume for a moment that $userName equals John. That PHP code is going to display

<script>
document.getElementById('userName').innerHTML=John;
...
</script>

However this is incorrect JavaScript, because all strings should be surrounded by quotes. So to fix your code, just add quotes around the values you want, such as

if($postSQL->num_rows > 0) {
    $postSQL->bind_result($userID,$userName, $postID, $desc, $image, $date);
    $postSQL->fetch();
    echo $userName."".$desc."".$date."".$image;
    echo "<script>           
        document.getElementById('userName').innerHTML='$userName';
        document.getElementById('description').innerHTML='$desc';
        document.getElementById('date').innerHTML='$date';
    </script>";
}

answered Jan 20, 2023 at 11:39

DamiToma

1,1273 gold badges11 silver badges32 bronze badges

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

Comments

davidreeder · Accepted Answer · 2023-01-20 11:37:29Z

0

Are you adding a tag around your userName for JavaScript to work with?, i.e.

echo '<div id="userName">' . $userName. '</div>';

answered Jan 20, 2023 at 11:37

davidreeder

11 bronze badge

Comments

Jan Pfeifer · Accepted Answer · 2023-01-20 11:38:15Z

0

You are generating HTML/JS code on server side. Use double quotes around variable:

document.getElementById('userName').innerHTML="$date";

answered Jan 20, 2023 at 11:38

Jan Pfeifer

2,85130 silver badges37 bronze badges

Comments

Dave · Accepted Answer · 2023-01-20 12:14:15Z

0

document.getElementById('userName').innerHTML='$userName';
document.getElementById('description').innerHTML='$desc';
document.getElementById('date').innerHTML='$date';

edited Jan 20, 2023 at 12:14

answered Jan 20, 2023 at 11:42

Dave

4,4463 gold badges27 silver badges38 bronze badges

Collectives™ on Stack Overflow

Javascript not changing html content

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related