Why doesn't the src attribute of inner html recognize my dynamically-generated variable?

Question

I have dynamically generated (via php) a list of videos, each of which belongs to a different user with a profile picture ('userpic'). I am able to pass the 'userpic' to a javascript function 'video' called within the php as follows in this first echo statement:

<?php
//Lots of code
echo "<script>
function video(userpic) {
function AnotherFunction();
document.getElementById('UserPicHolder').innerHTML = userpic;
}
</script>";
//Lots of code
?>

Function 'video' calls AnotherFunction (works great). The path for var = userpic is the correct local path and displays correctly in the correct div ('UserPicHolder'). Everything works fine....then I change the inner HTML to an image attribute as follows:

<?php
//Lots of code
echo "<script>
function video(userpic) {
function AnotherFunction();
document.getElementById('UserPicHolder').innerHTML = '<img src=\"userpic\"    
style=\"width:50px; height:55px\" alt=\"user picture\" class=\"SomeClass\" 
title=\"Some text\">';
}
</script>";
//Lots of code
?>

In this second echo statement, even though the path is clearly correct as shown in the first echo statement, the image just does not display in 'UserPicHolder'. I have replaced userpic in the src with a local path and the icon displays correctly (in this third echo statement):

<?php
//Lots of code
echo "<script>
function video(userpic) {
function AnotherFunction();
document.getElementById('UserPicHolder').innerHTML = '<img src=\"images/icon.jpg\"    
style=\"width:50px; height:55px\" alt=\"user picture\" class=\"SomeClass\" 
title=\"Some text\">';
}
</script>";
//Lots of code
?>

Why is userpic in the second echo statement not being identifed in the inner HTML img src? Note I have also replaced (just guessing at this point after reading other posts) src=\"userpic\" with src=\"".userpic."\" and src=\""+userpic+"\" and src=\"+userpic+\" and src=\"".+userpic+."\" to no avail. Thanks for any help!

There is space between <? and php on your code. I wonder how your code executes ? O.o — Shankar Narayana Damodaran
– Shankar Narayana Damodaran, Commented Oct 19, 2013 at 3:03
I suppose the HTML with the element UserPicHolder is sent before this javascript runs, right? Otherwise it won't exists and document.getElementById() will return undefined. — Havenard
– Havenard, Commented Oct 19, 2013 at 3:13
Perhaps you can provide some real code instead of this pseudo approach to your problem. We cannot help you with this syntactically incoherent crap. — Havenard
– Havenard, Commented Oct 19, 2013 at 3:14
Wow....just relax @Havenard. As I mentioned the only problems were I was tired and I did not know how to concatenate this properly. Sorry about my crap. — The One and Only ChemistryBlob
– The One and Only ChemistryBlob, Commented Oct 19, 2013 at 3:39

Steve · Accepted Answer · 2013-10-19 03:18:02Z

2

The correct way would be src=\"'+userpic+'\", as in:

document.getElementById('UserPicHolder').innerHTML = '<img src=\"'+userpic+'\" style=\"width:50px; height:55px\" alt=\"user picture\" class=\"SomeClass\" title=\"Some text\">';

That is because userpic is a JS variable and therefore needs to be concatenated with the rest of the string. The first part of the string is '<img src=\"', then you add the variable and then '\" style=\"width:50px; height:55px\" alt=\"user picture\" class=\"SomeClass\" title=\"Some text\">'

That all being said, why do you echo one long string and don't just exit out of PHP, like this:

<?php
//Lots of code
?>
<script>
    function video(userpic) {
        function AnotherFunction();
        document.getElementById('UserPicHolder').innerHTML = '<img src="'+userpic+'">';
    }
</script>
<?php
//Lots of code
?>

edited Oct 19, 2013 at 3:18

answered Oct 19, 2013 at 3:09

Steve

8,6587 gold badges42 silver badges54 bronze badges

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

2 Comments

The One and Only ChemistryBlob Over a year ago

Awesome....thank you very much @Steve! I knew I was close but I just couldn't get it (maybe staring at the code for 2 hours didn't help either :) ). Thanks again...your answer worked right away.

The One and Only ChemistryBlob Over a year ago

Yes, this worked too @Steve. I originally was going to do this but when I started making progress with the script in the php (the script was moved into the php portion of the page based on a prior erroneous conclusion when the script was in the html <head>) in what I was trying to do I just kept the code in the php instead of moving it back to the <head>. Any advantages to one over the other? e.g. Is one method faster?

Aditya Vikas Devarapalli · Accepted Answer · 2013-10-19 03:14:36Z

0

you are not correctly changing the innerHTML here:

document.getElementById('UserPicHolder').innerHTML = '<img src=\"userpic\"    
style=\"width:50px; height:55px\" alt=\"user picture\" class=\"SomeClass\" 
title=\"Some text\">';

this will make the src = userpic at all times

to chage it dynamically use the concatenation operator + and change the code to :

document.getElementById('UserPicHolder').innerHTML = '<img src=\"'+userpic+"\"    
style=\"width:50px; height:55px\" alt=\"user picture\" class=\"SomeClass\" 
title=\"Some text\">';

answered Oct 19, 2013 at 3:14

Aditya Vikas Devarapalli

3,5992 gold badges42 silver badges60 bronze badges

Collectives™ on Stack Overflow

Why doesn't the src attribute of inner html recognize my dynamically-generated variable?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related