unterminated string literal

[pdedecker]

Firebug, the Firefox extension that allows you to debug your code, returns this error when I tried to do some scripting:

unterminated string literal on line 67document.getElementById('newcomment').innerHTML = "<form style=\"background-co...showPackage.php?id=1

Where did I go wrong? Here's line 67:

	function newComment() {		document.getElementById('newcomment').innerHTML = "<form style=\"background-color: grey; padding: 10px; width: 95%\"><textarea id=\"newcomment-box\" style=\"width: 98%; height: 100px\" onkeypress=\"setTimeout('commentLengthCheck()', 500)\" maxlength=\"1500\"></textarea><br /><br /><p style=\"color: white\">You have <span id=\"newcomment-charsleft\" style=\"font-weight: bold\">1500</span> characters left.</p><?php	require_once('include/recaptcha.php'); $publickey = 'SOMETHINGGOESHERE'; ?><script type=\"text/javascript\" src=\"http://api.recaptcha.net/challenge?k=SOMETHINGGOESHERE\"></script><noscript><iframe src=\"http://api.recaptcha.net/noscript?k=SOMETHINGGOESHERE\" height=\"300\" width=\"500\" frameborder=\"0\"></iframe><br /><textarea name=\"recaptcha_challenge_field\" rows=\"3\" cols=\"40\"></textarea><input type=\"hidden\" name=\"recaptcha_response_field\" value=\"manual_challenge\"></noscript></form>";	}

[Synook]

<?php require_once('include/recaptcha.php'); $publickey = 'SOMETHINGGOESHERE'; ?>

The recaptcha.php file must be echoing some text with a quotation mark in it. Why don't you just put the form in another division that is hidden until the function is called?

[pdedecker]

I can assure you that is not causing any problems. Here's the actual page output:

function newComment() {		// alert("Currently out of order.");		document.getElementById('newcomment').innerHTML = "<form style=\"background-color: grey; padding: 10px; width: 95%\"><textarea id=\"newcomment-box\" style=\"width: 98%; height: 100px\" onkeypress=\"setTimeout('commentLengthCheck()', 500)\" maxlength=\"1500\"></textarea><br /><br /><p style=\"color: white\">You have <span id=\"newcomment-charsleft\" style=\"font-weight: bold\">1500</span> characters left.</p><script type=\"text/javascript\" src=\"http://api.recaptcha.net/challenge?k=6LdimAAAAAAAANmKV9CQ-WG6N9qpL30q2KL_xw4W\"></script><noscript><iframe src=\"http://api.recaptcha.net/noscript?k=6LdimAAAAAAAANmKV9CQ-WG6N9qpL30q2KL_xw4W\" height=\"300\" width=\"500\" frameborder=\"0\"></iframe><br /><textarea name=\"recaptcha_challenge_field\" rows=\"3\" cols=\"40\"></textarea><input type=\"hidden\" name=\"recaptcha_response_field\" value=\"manual_challenge\"></noscript></form>";	}

I have a strong feeling that this has got something to do with that </script> tag. Do I have to change it into <\/script> perhaps?

[Reg Edit]

[...] Do I have to change it into <\/script> perhaps?

No. Afraid I can't quite see what you're trying to do here but

• </script> is used to end a script block in an html page. I don't think would be valid to include </script> in an element's inner html;
• I'm not sure of your intent with <noscript>, but remember, this function will not be executed in the first place if the browser doesn't support scripts.

[jesh]

I have a strong feeling that this has got something to do with that </script> tag. Do I have to change it into <\/script> perhaps?

You could always try it. I haven't tried to dynamically write a script element to the page through innerHTML in a long time but I do vaguely remember having to either escape the closing script tag or to break it up:"<\/script>""</scr" + "ipt>"If the innerHTML route still doesn't work for you, you might consider using the DOM's createElement method:

var script = document.createElement("script");script.type = "text/javascript";script.src = "http://api.recaptcha.net/challenge?k=6LdimAAAAAAAANmKV9CQ-WG6N9qpL30q2KL_xw4W";document.getElementById("myContainerElement").appendChild(script);

[Reg Edit]

[...] I do vaguely remember having to either escape the closing script tag or to break it up:"<\/script>""</scr" + "ipt>"

Good point--hadn't seen that might be was what was going on. I would like more information to understand the overall intent better...

[pdedecker]

I would like more information to understand the overall intent better...

Okay, here's the deal. I'm building this download site called UbuntuPKG. Long story short: I want users to be able to add comments to application pages. To prevent spam, I want to implement reCAPTCHA (instructions).(Note: I manually added the output of echo recaptcha_get_html($publickey); to the JavaScript command in order to get full control of the code.)

[Reg Edit]

Okay, here's the deal. I'm building this download site called UbuntuPKG. Long story short: I want users to be able to add comments to application pages. To prevent spam, I want to implement reCAPTCHA (instructions).(Note: I manually added the output of echo recaptcha_get_html($publickey); to the JavaScript command in order to get full control of the code.)

OK but I still don't see why you want to generate the element contents in a javascript function. Edit: ...or why you want to put a script block in that element. /Edit

[...] Why don't you just put the form in another division that is hidden until the function is called?

What would be the reason not to do as Synook suggests?

[Synook]

Btw, looking at your code... what is the point of a noscript block that is generated by JavaScript?

[justsomeguy]

The instructions on the recaptcha page don't say anything about Javascript, there is just a PHP library to use. Where does Javascript come into play?

[pdedecker]

It's the PHP library that echoed the JavaScript code on my page.

[justsomeguy]

There's not a syntax error in the code, so it must be the script tags. And, as suggested, there's no point to having a noscript tag in this context. Try this:

function newComment() {		// alert("Currently out of order.");		document.getElementById('newcomment').innerHTML = "<form style=\"background-color: grey; padding: 10px; width: 95%\"><textarea id=\"newcomment-box\" style=\"width: 98%; height: 100px\" onkeypress=\"setTimeout('commentLengthCheck()', 500)\" maxlength=\"1500\"></textarea><br /><br /><p style=\"color: white\">You have <span id=\"newcomment-charsleft\" style=\"font-weight: bold\">1500</span> characters left.</p><scr"+"ipt type=\"text/javascript\" src=\"http://api.recaptcha.net/challenge?k=6LdimAAAAAAAANmKV9CQ-WG6N9qpL30q2KL_xw4W\"></scr"+"ipt></form>";	}

[pdedecker]

This generates no JavaScript errors. However, the script doesn't actually generate the captcha, while that's what it's supposed to do. How very strange...

[justsomeguy]

It doesn't work to write a script tag using innerHTML, the script does not get executed. You can try it by writing just a simple script tag with an alert statement, you won't see the popup. Opera shows me that the generated source of the page is this:

<html>  <HEAD>	<TITLE>captcha test</TITLE>	<script type="text/javascript">	function newComment() {		// alert("Currently out of order.");		document.getElementById('newcomment').innerHTML = "<form style=\"background-color: grey; padding: 10px; width: 95%\"><textarea id=\"newcomment-box\" style=\"width: 98%; height: 100px\" onkeypress=\"setTimeout('commentLengthCheck()', 500)\" maxlength=\"1500\"></textarea><br /><br /><p style=\"color: white\">You have <span id=\"newcomment-charsleft\" style=\"font-weight: bold\">1500</span> characters left.</p><scr"+"ipt type=\"text/javascript\">alert(\"test!\");</scr"+"ipt><scr"+"ipt type=\"text/javascript\" src=\"http://api.recaptcha.net/challenge?k=6LdimAAAAAAAANmKV9CQ-WG6N9qpL30q2KL_xw4W\"></scr"+"ipt></form>";	}	</SCRIPT>  </HEAD>  <BODY>   <DIV id="newcomment"><FORM style="background-color: grey; padding: 10px; width: 95%"><TEXTAREA id="newcomment-box" style="width: 98%; height: 100px" onkeypress="setTimeout('commentLengthCheck()', 500)" maxlength="1500"></TEXTAREA><BR><BR><P style="color: white">You have <SPAN id="newcomment-charsleft" style="font-weight: bold">1500</SPAN> characters left.</P><script type="text/javascript">alert("test!");</SCRIPT><script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LdimAAAAAAAANmKV9CQ-WG6N9qpL30q2KL_xw4W"></SCRIPT></FORM></DIV>   <A href="java script:void(0);" onclick="newComment();">add</A>  </BODY></html>

Clearly there is a script in there with an alert statement, clicking on the link to run the function shows the text box but does not execute the Javascript.You can't use innerHTML to run a script, the innerHTML is just displayable content. If you want to run the script you need to use document.write.

[jesh]

You can use innerHTML to put scripts in the page, but, like justsomeguy said, they won't execute on their own. To get them to execute, you have to use a pretty lame little hack like this:

<html><body><div id="test"></div><script type="text/javascript">// load the html into the element using innerHTMLvar html = "<scrip" + "t>alert('This script is added to the DOM using innerHTML');</scri" + "pt>";document.getElementById("test").innerHTML = html;// then, later, get all the script elementsvar scripts = document.getElementById("test").getElementsByTagName("script");for(var i = 0; i < scripts.length; i++){  // eval the innerHTML of the script.	eval(scripts[i].innerHTML);}</script></body></html>

But, as a hack, I'm not certain that this will work in all instances. You're better off rethinking how you get this script on the page. Perhaps something more like this:

<script type="text/javascript" id="captchascript"></script><script type="text/javascript">document.getElementById("captchascript").src = "http://api.recaptcha.net/challenge?k=6LdimAAAAAAAANmKV9CQ-WG6N9qpL30q2KL_xw4W";</script>