{"id":71373,"date":"2004-09-23T14:08:00","date_gmt":"2004-09-23T14:08:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2004\/09\/23\/how-can-i-display-multiple-lines-of-output-in-a-web-page\/"},"modified":"2004-09-23T14:08:00","modified_gmt":"2004-09-23T14:08:00","slug":"how-can-i-display-multiple-lines-of-output-in-a-web-page","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-display-multiple-lines-of-output-in-a-web-page\/","title":{"rendered":"How Can I Display Multiple Lines of Output in a Web Page?"},"content":{"rendered":"

\"Hey,<\/p>\n

Hey, Scripting Guy! How do I get multiple lines of output in a Web page using the Document.Body.InnerHTML property? I can only get one line of output on my page.<\/p>\n

— CM<\/p>\n

\"Spacer\"\"Hey,\"Script<\/a><\/p>\n

Hey, CM. Sounds like you\u2019re creating an instance of Internet Explorer and trying to display script output in it. And we\u2019re willing to bet you\u2019re using a script similar to this:<\/p>\n

strComputer = \".\"\nSet objExplorer = WScript.CreateObject(\"InternetExplorer.Application\")\nobjExplorer.Navigate \"about:blank\"\nobjExplorer.ToolBar = 0\nobjExplorer.StatusBar = 0\nobjExplorer.Visible = 1\nSet objWMIService = GetObject _\n    (\"winmgmts:\\\\\" & strComputer & \"\\root\\cimv2\")\nSet colItems = objWMIService.ExecQuery _\n  (\"SELECT * FROM Win32_Service\")\nFor Each objItem in colItems\n    strHTML = objItem.DisplayName  & \" = \" & objItem.State & \"<BR>\"\n    objExplorer.Document.Body.InnerHTML = strHTML\nNext\n<\/pre>\n
In theory<\/i>, this script is supposed to display the name and status of all the services installed on your computer. If you have three services installed on your computer, you expect to get output that looks like this:<\/p>\n
Service A = Running\nService B = Stopped\nService C = Running\n<\/pre>\n
Instead, you\u2019re getting output that looks like this, with only the very last service in the collection displayed:<\/p>\n
Service C = Running\n<\/pre>\n
What\u2019s wrong? Well, you have a For Each loop that loops through the collection of services. And you have a line of code that assigns the service name and state to a variable. That\u2019s this line:<\/p>\n
strHTML = objItem.DisplayName  & \" = \" & objItem.State & \"<BR>\"\n<\/pre>\n
You then have this line of code, which sets the InnerHTML property of your Web page to the value of strHTML:<\/p>\n
objExplorer.Document.Body.InnerHTML = strHTML\n<\/pre>\n
This<\/i> is where the problem lies. The InnerHTML property, for our purposes, consists of all the information displayed on the Web page. The first time your code loops through the collection strHTML is equal to this:<\/p>\n
Service A = Running\n<\/pre>\n
And that\u2019s exactly what gets displayed in the Web page. But what happens the second time your code loops through the collection? When that happens strHTML gets set to this:<\/p>\n
Service B = Stopped\n<\/pre>\n
That\u2019s fine, except now you\u2019re setting the InnerHTML – remember, that\u2019s all the information that is displayed on the Web page – to the value of strHTML. That means that the entire contents of your Web page is erased and replaced by strHTML. That\u2019s why only one line of information is displayed: strHTML only contains one line of information. You keep setting the InnerHTML property to one line of information, then a second later you replace it with a new line. You\u2019re replacing information rather than appending it.<\/p>\n
So is there a way to fix this? Of course there is; otherwise we wouldn\u2019t have chosen to answer this question! This script solves the problem for you:<\/p>\n
strComputer = \".\"\nSet objExplorer = WScript.CreateObject(\"InternetExplorer.Application\")\nobjExplorer.Navigate \"about:blank\"\nobjExplorer.ToolBar = 0\nobjExplorer.StatusBar = 0\nobjExplorer.Visible = 1\nSet objWMIService = GetObject _\n    (\"winmgmts:\\\\\" & strComputer & \"\\root\\cimv2\")\nSet colItems = objWMIService.ExecQuery _\n  (\"SELECT * FROM Win32_Service\")\nFor Each objItem in colItems\n    strHTML = strHTML & objItem.DisplayName  & \" = \" & objItem.State & \"<BR>\"\nNext\nobjExplorer.Document.Body.InnerHTML = strHTML\n<\/pre>\n
What\u2019s different here? First notice the new line of code for assigning a value to strHTML:<\/p>\n
strHTML = strHTML & objItem.DisplayName  & \" = \" &  objItem.State & \"<BR>\"\n<\/pre>\n
What we\u2019re doing here is saying that strHTML gets assigned whatever is already in strHTML<\/i> plus some new information. The first time your script runs through the loop, strHTML gets assigned this value:<\/p>\n
Service A = Running\n<\/pre>\n
The second time the script runs through the loop, it gets assigned the value it already has plus the new information. Thus strHTML equals this:<\/p>\n
Service A = Running\nService B = Stopped\n<\/pre>\n
By the third time through, strHTML will equal this:<\/p>\n
Service A = Running\nService B = Stopped\nService C = Running\n<\/pre>\n
This<\/i> is the data you wanted displayed. And notice that we don\u2019t display the data inside the For Each loop. Instead, all we do in the loop is build up the value of strHTML. After we have looped through all the data, then<\/i> we finally set the InnerHTML property to the value of strHTML. And because strHTML contains all our data, all our data gets displayed on the Web page.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! How do I get multiple lines of output in a Web page using the Document.Body.InnerHTML property? I can only get one line of output on my page. — CM Hey, CM. Sounds like you\u2019re creating an instance of Internet Explorer and trying to display script output in it. And we\u2019re willing to […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-71373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
Hey, Scripting Guy! How do I get multiple lines of output in a Web page using the Document.Body.InnerHTML property? I can only get one line of output on my page. — CM Hey, CM. Sounds like you\u2019re creating an instance of Internet Explorer and trying to display script output in it. And we\u2019re willing to […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/71373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=71373"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/71373\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=71373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=71373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=71373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}