I’m trying to create a Javascript button inside PHP that will write innerHTML to a span to overwrite the CSS to change a div from display:none to display:block. (Got that?) So far I just can’t get the syntax right. At this point in the code, the div (in red) is correctly hidden but the button does not react at all; it doesn’t call the function in a way that writes the span contents. The variables are being filled in via a MySQL table. I included commented-out examples above each code so you know what content I’m expecting.
while ($arrayArtSizeTOC = mysql_fetch_array($sqlArtSizeTOC)) {
$qtyTOC = htmlspecialchars($arrayArtSizeTOC['SUM(article_size)']);
if ($qtyTOC == '') {$qtyTOC = '0';}
/* Initially hide the detail reports with CSS, the id built of the $i and $ed_i variables to be unique so the span, button, and function all relate */
// <style type="text/css">#displaym1ta { display:none; }</style>
echo "<style type='text/css'>#displaym" . $i . $ed_i . " { display:none; }</style>";
// A unique-ID span in which to write innerHTML to overwrite the above CSS and show the div.
// <span id="showm1ta"></span>
echo "<span id='showm" . $i . $ed_i . "'></span>";
// The function to call that overwrites the CSS and shows the hidden div
//<script>function showm1ta() {
echo "<script>function showm" . $i . $ed_i . "() \\{";
/* document.getElementById('showm1ta').innerHTML = '<style type="text/css">#displaym1ta{display:block;}</style>'}</script>
*/
echo "document.getElementById('showm" . $i . $ed_i . "').innerHTML = '<style type=\\"text/css\\">#displaym" . $i . $ed_i . "\\{display:block;\\}</style>'\\}</script>";
// The button to call the function
echo " <input type='button' class='button50' value='Breakdown' onclick='showm" . $i . $ed_i . "()'><br>";
// create div to house all the detail reports
echo"[COLOR="#FF0000"]<div[/COLOR] id='displaym" . $i . $ed_i . "' style='clear:left; float:left; padding: 0 4em; background-color:#eee;'>";
echo"<p>TOC article: <strong>". $qtyTOC . "</strong> pages.</p>";
}
My first step to debug this would be to open the browser console (Firebug if you have it and are using Firefox) and check for errors. It will usually highlight whether you have an error in the syntax or whether it’s just not firing. Also consider putting in an alert(“1”) message (or similar) at stages around the code so that alert boxes pop up when the JS gets to certain points.
So far the only change I’m pretty sure of is to remove the back-slashes from { and }.
There are no errors in the console.
I did do an echo of the values inserted in the variables, and they show fine. I think I need to put the backslashes, single- and double-quotes in the right places.
To be honest, I would rewrite portions purely because I’m a bit of a stickler for using particular quotes in particular places. For example, I would always use echo ‘string’; rather than echo “string”; and I would also always put <script type=“text/javascript”> rather than <script type=‘text/javascript’>. But that’s me.
To be honest, there’s far too little for me to go on, personally. But if you put an alert() in the section that you expect to fire when you click the button, and it still doesn’t fire, then your button looks to be the one at fault. Maybe it’s not correctly bound to the event that you are trying to fire?
Try using http://jsfiddle.net/ with the raw JS that is generated (plus the HTML) and let’s take a look at it in a way that we can fiddle with and see if we can get it working
Finally, you don’t want to set innerHTML. That is the contents of the div (your paragraph). Instead you’d want something like
document.getElementById().style.display = “block”;
Let us know how that works out.
[ edit: Ha! I see that Steve I referenced was you! ]
Here is the present version of the code, incorporating your suggestions, QMonkey:
/* Initially hide the reports in the Div with CSS, the id is built of the $i, $ed_i, and $url variables to be unique so that the div, button and function all relate. */
echo "<style type='text/css'>#displaym" . $i . $ed_i . $url ." { display:none; }</style>";
// The function to call that overwrites the CSS and shows the hidden div
echo "<script>function showk" . $i . $ed_i . $url . "() {";
echo "document.getElementById(#displaym" . $i . $ed_i . $url . ").style.display = 'block';</script>";
// The button to call the function
echo " <input type='button' class='button50' value='Article Breakdown' onclick='showk" . $i . $ed_i . $url . "()'><br>";
// create div to house all the output for this record
echo"<div id='displaym" . $i . $ed_i . $url . "' style='clear:left; float:left; padding: 0 4em; background-color:#eee;'>";
echo"<p><strong>". $qtyTOC . "</strong> pages, 'TOC' section</p>";
}
I am getting errors in the Google console now, and the button does not show the div contents. Errors:
Uncaught SyntaxError: Unexpected token ILLEGAL
Uncaught ReferenceError: [value] is not defined <== [value] = output value of " . $i . $ed_i . $url . "
Unfortunately, the line referenced is all the lines in the loop; they are all on one line in Google.
I don’t know whether the ‘#’ belongs here or not, but the errors appear with and without it:
getElementById(#displaym"
Here is the present version of the code, incorporating your suggestions, QMonkey:
/* Initially hide the reports in the Div with CSS, the id built of the $i, $ed_i, and $url variables to be unique so that the div, button and function all relate */
echo "<style type='text/css'>#displaym" . $i . $ed_i . $url ." { display:none; }</style>";
// The function to call that overwrites the CSS and shows the hidden div
echo "<script>function showk" . $i . $ed_i . $url . "() {";
echo "document.getElementById(#displaym" . $i . $ed_i . $url . ").style.display = 'block';</script>";
// The button to call the function
echo " <input type='button' class='button50' value='Article Breakdown' onclick='showk" . $i . $ed_i . $url . "()'><br>";
// create div to house all the output for this record
echo"<div id='displaym" . $i . $ed_i . $url . "' style='clear:left; float:left; padding: 0 4em; background-color:#eee;'>";
echo"<p><strong>". $qtyTOC . "</strong> pages, 'TOC' section</p>";
}
I get two errors in the Google console:
Uncaught SyntaxError: Unexpected end of input
Uncaught ReferenceError: [value] is not defined <== [value] = output of " . $i . $ed_i . $url . "
Unfortunately, the line referenced contains the entire loop on one line.
Also, I don’t know whether I need the ‘#’ in getElementById(#displaym" I get the Google errors either way.
If the console is reporting this in the error: " . $i . $ed_i . $url . " That means that the code hasn’t been parsed properly. Most likely down to incorrect quotes somewhere along the line. Also, put some
characters in (in PHP you’ll need to use "
" and not ’
') to force some linebreaks for readability if you need it
]
JS not really my thing, but glad to have pointed you in the right direction and happy you sorted it