php variable with javascript echoing

Question

Im working on modifying my page once a user is logged in. (changing the login logo and display welcome username next to it). so far the img swapworks, but i cannot seem to add $userId into the script to display the sessions username, just the welcome back part works if i remove the $userId. Its weird because when i do this with PHP and HTML it works quite easily.

<?php 
if (isset($_SESSION['logged_in'])) { 
    $userId = $_SESSION['username'];

    echo '<script>  
        var img = document.getElementById("imgSwap");
        img.src = "images/lockClosed.png"; 
        </script>';

    echo '<script>
        var userId = '."$userId".';
        var text = document.getElementById("loggedInMsg");
        text.innerHTML = "Welcome Back, + userId"; 
        </script>';        
}

Answer 1

If $userId is a string, it needs to be quotead in JS.

This should work:

<?php 
if (isset($_SESSION['logged_in'])) { 
    $username = $_SESSION['username'];

    // Let's end the PHP block and output our JS
    ?>

    <script>  
        var img = document.getElementById("imgSwap");
        img.src = "images/lockClosed.png"; 

        var username = '<?= $username ?>';
        var text = document.getElementById("loggedInMsg");
        text.innerHTML = "Welcome Back, " + username; 
    </script>;        

    <?php
    // Now when we're done with the JS, open the PHP block again
}

In my opinion, it's way easier to end the PHP block instead of echoing HTML and JS using PHP, since you then get some proper syntax highlighting and don't need to care about escaping quotes etc.

(I also changed the variable $userId to $username , since it's the username we want to output, not the id)

So, what was the actual issue?

You have a couple of issues:

First issue

'var userId = '."$userId".';`

Since $userId here is a string with the username, it wouldn't be quoted and result in: var userId = foo; instead of var userId = 'foo'; .

You need to make quote it like this:

'var userId = "' . $userId . '";`

As you see, now the " is in the JS string instead of around the PHP variable.

Second issue

`'text.innerHTML = "Welcome Back, + userId";` 

Here's you're not concatenating the strings, but are literally outputting "Welcome Back, + userId"; . For the strings to be concatenated, you need to end the first string:

`'text.innerHTML = "Welcome Back, " + userId;` 

Answer 2

It could be the problem of the quotes. you can try include quotes when echo out the value

<?php if(isset($_SESSION['logged_in'])){ 
        $userId = $_SESSION['username'];
        echo '<script>  
            var img = document.getElementById("imgSwap");
            img.src = "images/lockClosed.png"; 
            </script>';
        echo '<script>
            var userId = "'.$userId.'";
            var text = document.getElementById("loggedInMsg");
            text.innerHTML = "Welcome Back, + userId"; 
            </script>';        
}

Answer 3

If you want to concatenate variable to string in javascript you have to seperate it from string since + is just another ASCI character if it is in quotation marks and it does not concatenate : text.innerHTML = "Welcome Back, + userId"; should be text.innerHTML = "Welcome Back, "+ userId;