Solved

Cannot find the exact syntax of setTimeout with innerHTML as argument.

Posted on 2012-03-12
21
206 Views
Last Modified: 2012-03-15
I am developing a very simple function that should allow me to display a countdown message:

var myTable=document.getElementById("myTable");
var myHTML0 = myTable.outerHTML;
var j=0;
var T=5;
for (g = 0; g<T; g++) {
      j = T-g;
      myMsg = "We have "+j+" seconds missing to go.";
      myHTML = myHTML0.substring(0,myHTML0.indexOf("We"))      +myMsg+myHTML0.substring(myHTML0.indexOf("We")+2,myHTML0.length);
***      var k = setTimeout("document.getElementById('myNote').innerHTML = myHTML",       g*1000);
      myHTML ="";
}
Unfortunately, I canno manage to spot the correct syntax of line ***. Can you suggest how? Thanx.
0
Comment
Question by:Sar1973
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 10
21 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 37711883
try this ;

var myTable=document.getElementById("myTable");
var myHTML0 = myTable.outerHTML;
var j=0;
var T=5;
for (g = 0; g<T; g++) {
      j = T-g;
      myMsg = "We have "+j+" seconds missing to go.";
      myHTML = myHTML0.substring(0,myHTML0.indexOf("We"))      +myMsg+myHTML0.substring(myHTML0.indexOf("We")+2,myHTML0.length);
***      var k = setTimeout("document.getElementById('myNote').innerHTML = '" + myHTML + "'",       g*1000);
      myHTML ="";
}

Open in new window


Additionaly check this : http://keith-wood.name/countdown.html
0
 
LVL 9

Author Comment

by:Sar1973
ID: 37711916
I have tried these:
1. (posted) setTimeout("document.getElementById('myNote').innerHTML = myHTML", g*1000);
2. setTimeout("document.getElementById('myNote').innerHTML = '" + myHTML + "'",       g*1000);
3. setTimeout("document.getElementById('myNote').innerHTML = "+ myHTML, g*1000);
4. setTimeout("document.getElementById('myNote').innerHTML = \'myHTML\', g*1000); (or something similar).
In case 2. it says that I've inserted a string without termination, in the other cases the editor alerts of syntax errors (3.) or returns a null value (1.), so that the table gets empty; moreover it does not support jQuery.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37711950
ok great for case 2 :

setTimeout("document.getElementById('myNote').innerHTML = '" + escape(myHTML) + "'",       g*1000);
0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 82

Expert Comment

by:leakim971
ID: 37711961
or :

setTimeout("document.getElementById('myNote').innerHTML = '" + myHTML.replace(/'/g, "\\'") + "'",       g*1000);
0
 
LVL 9

Author Comment

by:Sar1973
ID: 37712055
Will test tomorrow and tell you, thanx in advance.
0
 
LVL 9

Author Comment

by:Sar1973
ID: 37714344
"escape" does not work at all (gives unknow contents), while the other gives "string wothout termination" error as above.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37714418
please provide a direct link to see you page
0
 
LVL 9

Author Comment

by:Sar1973
ID: 37714608
It's not published yet. But I'm not sure that I need to make the string portable with escape function; I should understand instead why I get "string without termination" error even if I point the HTML code with single marks.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37714690
about your "string without termination" error :

var blabla = "some string without error";

var bloblo = "string with-----> " <------- termination error";
0
 
LVL 9

Author Comment

by:Sar1973
ID: 37720647
Sorry, you are asking which is the exact error message I get?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37720809
No, I want you understand why you get the error.
bloblo have a double quote in the string, it need to be escaped
0
 
LVL 9

Author Comment

by:Sar1973
ID: 37720901
I can also tell you that without using quotes I get a blank content/value in the table in subject, while it works if I use the absolute syntax without timing "document.getElementById('myNote').innerHTML = myHTML;".
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37720923
You said : << "escape" does not work at all (gives unknow contents), >>

Could you post the content here

If you can publish this page I can help you more.
0
 
LVL 9

Author Comment

by:Sar1973
ID: 37721466
Escape functions returns the HTML code replacing spaces and other characters with %20 or similar: it's not what I need. Probably the code I'm using encounters troubles durign the cycle (for ex. does not refresh the k variable in time) or misses some DIV, TD, BODY or other statement or discriminates between Ucase and Lcase.
I've read on w3schools tutorial that setTimeout variables must be named with different strings, that's why I was also asking how to combine eval syntax with setTimeout syntax.
As an alternative, I could think to insert a label or another object and give it a text value equal to the string I need to display.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37721483
>Escape functions returns the HTML code replacing spaces and other characters with %20 or similar: it's not what I need.

Could you post one generating the error?
0
 
LVL 9

Author Comment

by:Sar1973
ID: 37721512
Exactly (it's a literal translation): "Line 1, character 50, string constant without termination" or "Line 2, character 1, syntax error" in the 2 mentioned cases.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37721620
No, I want to see the string escaped :

blablabla%20blablabla
%YX

Open in new window

blablabla

the full myHTML string escaped, I mean : escape(myHTML)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37721624
blablabla%20blablabla%YXblablabla
0
 
LVL 9

Author Comment

by:Sar1973
ID: 37724863
This is the original HTML:

<DIV style="WIDTH: 351px; HEIGHT: 25px" id=myNote align=left><TABLE style="DISPLAY: inline" border=0 cellSpacing=0 cellPadding=0 width=381>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid" bgColor=#ff0000 width=383><FONT color=#ffffff face=Arial>Nota</FONT></TD></TR></TBODY></TABLE></DIV>

and this is the escaped HTML:

%0D%0A%3CDIV%20style%3D%22WIDTH%3A%20351px%3B%20HEIGHT%3A%2025px%22%20id%3DmyNote%20align%3Dleft%3E%3CTABLE%20style%3D%22DISPLAY%3A%20inline%22%20border%3D0%20cellSpacing%3D0%20cellPadding%3D0%20width%3D381%3E%0D%0A%3CTBODY%3E%0D%0A%3CTR%3E%0D%0A%3CTD%20style%3D%22BORDER-BOTTOM%3A%201px%20solid%3B%20BORDER-LEFT%3A%201px%20solid%3B%20BORDER-TOP%3A%201px%20solid%3B%20BORDER-RIGHT%3A%201px%20solid%22%20bgColor%3D%23ff0000%20width%3D383%3E%3CFONT%20color%3D%23ffffff%20face%3DArial%3ENota%3C/FONT%3E%3C/TD%3E%3C/TR%3E%3C/TBODY%3E%3C/TABLE%3E%3C/DIV%3E
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 37725000
OK try this :
var k = setTimeout("document.getElementById('myNote').innerHTML = unescape('" + escape(myHTML) + "');", g*1000);

Open in new window

0
 
LVL 9

Author Comment

by:Sar1973
ID: 37725587
It works! Good job; I know only have to fix a format trouble, since the new table appears padded left about 5 px from the original.
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question