cannot pass PHP variable to javascript function

I cannot invoke a Javascript function if I try to pass a PHP array element as an arg. I've tried everything (except the right thing, I suppose).

Here is the PHP code -- the 2nd line is the one that is failing:

var_dump($theRow[11]);
$htmlBuffer = '<div onclick="showIt(' . $theRow[11] . ')">does not work!</div>';
$htmlBuffer = $htmlBuffer . '<div onclick="showIt()"> THIS WORKS FINE! </div>';

Here is the HTML code to output the above:

<html>
   <body>
      <?php echo '<div id="listSection">' . $htmlBuffer . '</div>'; 
      ?>
    </body>
</html>

Here is the javascript function 'showIt()':

function showIt(theVal)
{
   alert("HERE IS WHAT WAS PASSED IN: " + theVal);              
}

Here is the output on the page:

1) First I see this on the page:

string(8) "52e43c33"

Now, that is 100% fine. That is what I expect to see at array position #11. Note that 'theRow[11]' is a PHP array, where each array element is an 8-digit (hex) number. And that var_dump() call shows that the array element at position 11 is a valid 8-digit (hex) number, and that's what I expect to find there. So that is okay.

2) then I see this on the page:

does not work!  
THIS WORKS FINE!

When I click on "THIS WORKS FINE!" on my web page, I see an alert box appear that says this:

HERE IS WHAT WAS PASSED IN: undefined

Now that is okay by me. I did not pass a parameter to showIt() for the line of code I clicked on. The fact that the alert() box appears shows 100% certainty that the onclick() is working.

AND HERE IS THE FAILURE: when I click on the line of text in the browser window:

**does not work!**

-- which is trying to pass theRow[11] as the argument to showIt() -- the alert box does that's called in showIt() not appear.

I figured "okay this is a quoting issue."

SO I TRIED THESE to no avail:

$htmlBuffer = '<div onclick="showIt(\'' . $theRow[11] . '\')">does not work!</div>';
$htmlBuffer = '<div onclick="showIt(\"' . $theRow[11] . '\")">does not work!</div>';
$htmlBuffer = '<div onclick="showIt("' . $theRow[11] . '")">does not work!</div>';
$htmlBuffer = '<div onclick="showIt($theRow[11])">does not work!</div>';

NONE OF MY quoting attempts here succeeded.

How do I properly quote the line of code:

$htmlBuffer = '<div onclick="showIt(' . $theRow[11] . ')">does not work!</div>';

to get theRow[11] successfully passed to showIt()?

EDIT: here is the 'View source' of the page:

string(8) "7ab79992"
<!DOCTYPE html>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script type="text/javascript">
       function showIt(theVal)
       {
         alert("HERE IS WHAT WAS PASSED IN: " + theVal);              
       }
    </script>
  </head>
  <body>  
    <div id="listSection"><div onclick="showIt(7ab79992)">does not work!</div>
    <div onclick="showIt()"> THIS WORKS FINE! </div></div>
  </body>
</html>

Solution

First a tip: is easy to read if you append the string with: $htmlBuffer .= "Something else"; that is equivalent to $htmlBuffer = $htmlBuffer . "Something else";

If you are 100% sure that the content of $theRow[11] is the string "52e43c33" this version would be working:

$htmlBuffer = '';
$htmlBuffer .= '<div onclick="showIt(\'' . $theRow[11] . '\');">does not work!</div>';

The important part is that you are quoting the javascript string using ' so you must be sure that the php content of $theRow[11] must not have any '. Is easy to use ' to quote the javascript argument string because you are opening the HTML attribute with ". Remove the other lines that you are trying because thats can cause unbalanced quotes.

Check the output of your browser (use view-source:URL) you must see something like:

<div onclick="showIt('52e43c33');">does not work!</div>