HTML Goodies: Script Tip: Week 37

By Joe Burns

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >



     OK, so you know how the scroll works. Now let's get that scroll to show up in a text box. Below is the altered code. I have underlined new commands to the script.

...and here's the script:


var space = "                  "
var ScrollText = space + "Hey hey! Look at me scrollin..."

function SBScroll()

temp = ScrollText.substring(0,1);
ScrollText += temp

ScrollText = ScrollText.substring(1,ScrollText.length);
document.TheForm.display.value = ScrollText.substring(0,ScrollText.length);




<FORM NAME="TheForm">
<INPUT TYPE="text" NAME="display">
<INPUT TYPE="button" VALUE="Click me For the Scroll" onClick="SBScroll()">

     First off, if we're going to put this scroll into a text box, we're going to need a text box. So we'll start with the code at the bottom first:

<FORM NAME="TheForm">
<INPUT TYPE="text" NAME="display">
<INPUT TYPE="button" VALUE="Click me For the Scroll" onClick="SBScroll()">

     Through your powers of deduction, you've probably noticed that these are HTML Form flags. Now that we're going into a text box format, a few things become important. First off, you have to make sure that you assign the form itself and the text box a name. I have named the form itself "TheForm" and the text box "display". I think those are pretty representative efforts, yes?

      You'll not I also have the commands for the button in there. You probably won't fire up your scroll from a button, but if you ever want to--here it is. The button is created simply to house an onClick() Event Handler that triggers the function to run.

           OK, we know the players. Let's go back up and into the script for the display. Here's the line that gets the scroll into the text box:

document.TheForm.display.value = ScrollText.substring(0,ScrollText.length);

     You'll note the line is actually on two lines here in the display. That's only because of space constraints. This actually should go all on one line.

     The only thing that has changed is the text "window.status" is now the hierarchy statement "document.TheForm.display.value". That text is directing the output of the scroll to act as the value for the text box, "display", inside the form, "TheForm", on the HTML document.

     Just those few changes sent the output of the scroll to a text box. Nothing to it.

Next Week: New Script! Drop Down Link Menu & Frames

     Do YOU have a Script Tip you'd like to share? How about suggesting a Script Tip to write about? I'd love to hear it. Write me at:

Learn to write your own JavaScripts with the HTML Goodies 30-Step Primer Series

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date