HTML Goodies: Script Tip: Week 71

 

How you doin’?

     Now we know which button was clicked and which headline number should be displayed. Now we need to display what is called for and then reset all the values so that we’re ready for the next time the user clicks.

---

Here’s the Effect

---

Here’s the Code

---

     It time for headMach() part two. We know the number of the headline currently in the text display. We’ve either increased that number by one or taken it down by one depending on which button the user clicked. Now, let’s get the display and reset the values:

if (headShow == 1)
{

var _head = “first headline”;

var inlocat = “firstlocation.html”;

}


if (headShow == 2)
{

var _head = “second”;

var inlocat = “secondlocation.html”;

}


if (headShow == 3)
{

var _head = “third”;

var inlocat = “thirdlocation.html”;

}


if (headShow == 4)
{

var _head = “and so 4orth”;

var inlocat = “fourthlocation.html”;

}


document.headline.headHere.value = _head;

document.headline.nowShowing.value = headShow;

document.headline.shownext.value = “N”;

document.headline.showprev.value = “N”;

document.headline.inlocation = inlocat;

     We already know there are four headlines. We set that at the top of the function. So we need to now offer the actual text and links associated with each headline number.

if (headShow == 1)
{

var _head = “first headline”;

var inlocat = “firstlocation.html”;

     This format is used four times. If “headShow” is equal (==) to 1, then set the variable “_head” to the following text. Also set the variable “inlocate” to this location. Of course if you want the link to be off site then use the full URL there.

     Look again at the function. It tests for 2, 3, and 4 each time setting headline text and URL. This is obviously where you change things out to use this script yourself.

     Next we set and reset some values:

document.headline.headHere.value = _head;

     This forces the text value into the visible textbox.

document.headline.nowShowing.value = headShow;

     This gives the hidden input item the new value of “headShow” so the number can be called upon the next time the script runs.

document.headline.shownext.value = “N”;

document.headline.showprev.value = “N”;

     These two lines reset the hidden values of “shownext” and “showprev” so that the next time the user clicks, the functions can retest which value has been changed to “Y”. (Remember that from last week?)

document.headline.inlocation = inlocat;

     Finally, the URL associated with the headline is given the variable name “inlocate”.

     Everything looks good. I think we’re ready to click.

Next Week: Let me click

---

Learn to write your own JavaScripts with the