Thursday, March 28, 2024

HTML Goodies: Script Tip: Week 70

 

Hola…

     Now it gets hard to describe what’s going on because the script is written to have multiple functions interact. So read closely and I apologize for any confusion I’ll probably start up.



Here’s the Effect


Here’s the Code


     When you click on either the next or previous headline buttons, you enact a function. Those functions look like this:

function chngNext()
{

document.headline.shownext.value = “Y”

headMach();

}


function chngPrev()
{

document.headline.showprev.value = “Y”

headMach();

}

     Let’s say you click on “Next Headline”. The function chngNext() fires and the value of one of the hidden fields, “shownext”, has its value changed from “N” to “Y”.

     Then another function, named headMach(), is enacted.

     The function chngPrev() runs if the “Previous Headline” button is clicked. It works the same way. The hidden field “showprev” is changed from “N” to “Y” and that headMach() runs.

     
…but’s what’s headMach()?

     Why, this is headMach():

function headMach()
{

var totalHeads = 4; //total number of headlines you want

if ((document.headline.shownext.value == “Y”) && (document.headline.showprev.value == “N”))
{

var headShow=
(parseInt(document.headline.nowShowing.value) +1);

if (headShow > totalHeads)
{

var headShow = 1;}

}

if ((document.headline.showprev.value == “Y”) && (document.headline.shownext.value == “N”))
{

var headShow=
(parseInt(document.headline.nowShowing.value) – 1);

if (headShow < 1)
{

var headShow = totalHeads;}

}

     At least that’s the first half of it. The second half is next time. The concept of this function is to set the variable value for “headshow” alerting the browser which headline is now in display. From the top:

     A variable “totalHeads” is created and set to 4. The author was nice enough to add some comment text alerting you to what that line of code represents. Remember that even though JavaScript counts starting from zero, this script is constructed to be a literal count of headlines. Four headlines are used, thus the number here is four. With me?

     Now we test the two hidden fields “shownext” and “showprev”. Each is represented by a hierarchy statement document.headline.shownext.value. Remember in the two functions above, we set values to “Y” depending on which button was clicked.

     So the next line reads:

if ((document.headline.shownext.value == “Y”) && (document.headline.showprev.value == “N”))

     If the “shownext” value is equal to “Y” and (&&) the “showprev” value is equal to “N”,
then we can be sure the user clicked on the “Next Headline” because that button changed the value of “shownext”.

     You’ll note that is an IF statement format so if that situation is correct then something has to happen. This:

var headShow=
(parseInt(document.headline.nowShowing.value) +1);

     The variable “headshow” finally comes into play. Here it’s going to be given a value.
The value is equal to what is being shown in the text box. See that command “parseInt()”? That returns the numeric value of whatever is in it’s instance. If there’s also text, it ignores it. It only returns the number. In this case, it’s going to return the number displaying in the visible text box.

     That returned number will then have one added to it. Get it? Return the number…add one. The next headline is being forced to display.

     But what if we’re already looking at headline four of four? That’s handled by the next lines of code:

if (headShow > totalHeads)
{

var headShow = 1;}

     Let’s say headline four of four is displaying. When the function runs, the number four will be returned. If you add one…that’s five which is not good seeing as there’s only four headlines.

     The code just above is yet another IF statement that asks if the new number created, “headShow,” is larger than the total number of headlines, “totalHeads”. If it is, then set “headShow” to one, causing the headlines to recycle.

     Pretty smooth, huh?

     The second half of the function is the same thing except testing the opposite.

if ((document.headline.showprev.value == “Y”) && (document.headline.shownext.value == “N”))
{

var headShow=
(parseInt(document.headline.nowShowing.value) – 1);

if (headShow < 1)
{

var headShow = totalHeads;}

}

     Is “showprev” equal to “Y” and “shownext” equal to “N”? If so, then the user must have clicked the “Show Previous” button.

     Parse the text box and return the value and take away one.

     If “headShow” is now less than one (if one was in the text box and we take one away), then set “headShow” to equal the number of headlines. Again, forcing the run of headlines to recycle.

     OK! So now we have the method to set the number of the headline that should appear. Let’s get it to appear.

Next Week: Show me the headline!



     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:
jburns@htmlgoodies.com.


Learn to write your own JavaScripts with the

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured