Do javascript functions work within a php echo?

Question

I was cleaning up my code so that it was more uniform. I placed a couple of javascript functions in the echo command. I was surprised to find that after I had done that, the functions no longer worked. There were no errors that I received, it was only when I went through the page that I noticed that my functions were no longer working. I'm still in my javascript infancy, so I'm not sure if this is a common error or not, but I couldn't find anything related to it.

I troubleshot it down to the third line by taking away all echoes and slowly adding in more until the problem resurfaced. So, I'm not sure what I'm doing wrong.

The purpose of the functions is to make a grey overlay over everything, then a small confirmation box pops-up asking if you want to proceed with the task.

echo '<script type="text/javascript">';
                echo 'function showPopUp(el) {';
                    echo 'var cvr = document.getElementById("cover")';
                    echo 'var dlg = document.getElementById(el)';
                    echo 'cvr.style.display = "block"';
                    echo 'dlg.style.display = "block"';
                    echo 'if (document.body.style.overflow = "hidden") {';
                        echo 'cvr.style.width = "100%"';
                        echo 'cvr.style.height = "100%"';
                    echo '}';
                echo '}';
                echo 'function closePopUp(el) {';
                    echo 'var cvr = document.getElementById("cover")';
                    echo 'var dlg = document.getElementById(el)';
                    echo 'cvr.style.display = "none"';
                    echo 'dlg.style.display = "none"';
                    echo 'document.body.style.overflowY = ""';
                echo '}';
echo '</script>';

Extra information: The entire page is within the php tags, I found another unrelated function that is behaving the same way. The only way that the two are similar is that they both use the var command and they are all functions. Could this be the source?

Why are you trying to put all that into echo statements? As the other answers have pointed out, there's no reason to do that . . . leave the javascript and HTML as plain javascript and HTML, and use the PHP for sections that need dynamic content. Also, if you were using Firebug or webdeveloper tools or similar, you'd have seen errors in the javascript console right away. — ernie
– ernie, Commented Aug 16, 2012 at 20:49
Your js will only ever echo to a single line. You need to either add semicolons or newline characters to the strings you're outputting. — Matt
– Matt, Commented Aug 16, 2012 at 20:54

Matt · Accepted Answer · 2012-08-16 20:55:29Z

7

OH. MY. GOD.

Is the following "allowed" by your company's standards?

echo <<<HTML
<script type="text/javascript">
    function showPopUp(el) {
        var cvr = document.getElementById("cover")
        var dlg = document.getElementById(el)
        cvr.style.display = "block"
        dlg.style.display = "block"
        if (document.body.style.overflow = "hidden") {
            cvr.style.width = "100%"
            cvr.style.height = "100%"
        }
    }
    function closePopUp(el) {
        var cvr = document.getElementById("cover")
        var dlg = document.getElementById(el)
        cvr.style.display = "none"
        dlg.style.display = "none"
        document.body.style.overflowY = ""
    }
</script>
HTML;

Or just:

<?php
// some PHP code
?>
<script type="text/javascript">
    function showPopUp(el) {
        var cvr = document.getElementById("cover")
        var dlg = document.getElementById(el)
        cvr.style.display = "block"
        dlg.style.display = "block"
        if (document.body.style.overflow = "hidden") {
            cvr.style.width = "100%"
            cvr.style.height = "100%"
        }
    }
    function closePopUp(el) {
        var cvr = document.getElementById("cover")
        var dlg = document.getElementById(el)
        cvr.style.display = "none"
        dlg.style.display = "none"
        document.body.style.overflowY = ""
    }
</script>
<?php 
//some MORE PHP code...

Because if it is, you would have noticed you're using an assignment in an if statement:

if (document.body.style.overflow = "hidden")

should be

if (document.body.style.overflow == "hidden")

Note: The way you're doing it prints the entire javascript block on a single line. If you must print it out this way, you have to either add semicolons or newline characters to each string you print, where necessary.

edited Aug 16, 2012 at 20:55

answered Aug 16, 2012 at 20:43

Matt

7,0504 gold badges31 silver badges50 bronze badges

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

7 Comments

Naftali Over a year ago

I fixed it up a bit for you ^_^

Matt Over a year ago

@Neal sweet baseball simulator BTW. When's the hockey simulator coming out? I want to see how bad the Islanders and Devils really are!

ernie Over a year ago

Is there even a reason for that whole if block? I don't see the width and height being changed anywhere else, so it was fine that it was always true ;)

Naftali Over a year ago

@Matt :-P Don't you think you are hilarious. haha Everyone knows the Islanders would kick the Devils' behinds ^_^

Matt Over a year ago

@Neal and the Rangers would come out on top every time.

|

Seva Alekseyev · Accepted Answer · 2012-08-16 20:43:45Z

2

The generated JavaScript is syntactically incorrect - the lines are not terminated neither with semicolons, nor newlines. Replace with

echo 'var cvr = document.getElementById("cover");';

and so forth.

Also, I vaguely recall that there needs to be a newline after the end of the <script> element. In PHP, echo does not produce a newline at the end, and strings in single quotes don't allow for escape sequences like \n. So you need to do:

echo '<script type="text/javascript">'."\n";

answered Aug 16, 2012 at 20:43

Seva Alekseyev

61.8k25 gold badges173 silver badges297 bronze badges

2 Comments

Matt Over a year ago

AFAIK you don't need semicolons at the end of JS lines. And you DEFINITELY don't need a newline after you close a <script> tag.

Matt Over a year ago

@Neal I agree that you should but it's not syntactically necessary.

jeroen · Accepted Answer · 2012-08-16 20:43:52Z

1

The problem with your echo statements, is missing spaces / semicolons:

echo 'var cvr = document.getElementById("cover")';
                echo 'var dlg = document.getElementById(el)';
                echo 'cvr.style.display = "block"';

shows up in html as:

var cvr = document.getElementById("cover")var dlg = document.getElementById(el)cvr.style.display = "block"

etc.

and that doesn't make sense in javascript.

answered Aug 16, 2012 at 20:43

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Collectives™ on Stack Overflow

Do javascript functions work within a php echo?

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related