SoFunction
Updated on 2025-03-06

JavaScript Basic Q&A 4

2. Enhanced navigation function

 

1. Links in the drop-down menu (Links in Select Menu）

Q:How do I implement linking to different pages in the drop-down menu?

A: To create a drop-down menu shown:

You can use the following code:

  1. <form>
  2. <select 
  3. onChange="if(!=0)
  4. =this.options[].value">
  5. <option value="" selected>Select a page
  6. <option value="">JavaScript FAQ
  7. <option value="">Numbers
  8. <option value="">Strings
  9. <option value="">Navigation
  10. <option value="">Colors
  11. <option value="">
  12. </select>
  13. </form> 

Just change the menu item and its corresponding URL to what you need. You can use absolute address (like), or you can use relative addresses (like ).

 

2. Button link (Button Links）

Q:How can I turn a button into a hyperlink to another page?

A: To create a button like:

You can use this code:

  1. <form> 
  2. <input type=button 
  3. value="insert button text here"
  4. onClick="='Your_URL_here.htm'">
  5. </form> 

Just change the button text and destination address you need. Try this:

You can use absolute addresses (like) You can also use relative addresses (like).

 

3. Back button (Back Button）

Q: Can I make the buttons look like the browser's "back" button?

A: Create your ownBackButton, you can use this code:

  1. <form>
  2. <input type=button value="Back"
  3. onCLick="()">
  4. </form>

Try it now:

 

4. Forward button (Forward Button）

Q: Can I make the buttons look like the "forward" button in the browser?

A: To create your own "Forward" button, use this code:

  1. <form>
  2. <input type=button value="Forward"
  3. onCLick="()">
  4. </form>

If the browsergo aheadThe button is currently unavailable, then this "go aheadThe " button also does not work. This is the case that the current page is the last page in your browsing history. In other words, if you are using the browser "BackThe button arrives at this page (orBack button written by script), then this forward button will work. Try it now!

 

5. Query string (Query Stirngs）

Q: Can I access the query string in the current URL in my footsteps?

A: The query string (or search string) is an optional part of the URL that follows the file name and boots with a question mark (?). For example, the following URL contains a query string after the HTML file name?myquery：

/?myquery

Your script can use JavaScript properties to access the query character in the current URL. Click the button below to try it! (To view the URL in the address, you may want to display this page in the top browser window.)

The code to create these buttons is:

  1. <form>
  2. <input type=button value="Add query ?test"  
  3. onClick="self=
  4. +'//'
  5. +
  6. ++'?test'">
  8. <input type=button value="Show query" 
  9. onClick="alert('Query string: '+)">
  11. <input type=button value="Remove query" 
  12. onClick="self=
  13. +'//'
  14. +
  15. +">
  16. </form>

Notice:Query strings may sometimes not work as expected. For example, if you save this page on local disk, it won't work in Internet Explorer (but it still works in Netscape Navigator).

 

6. Pass parameters to the page (Passing parameters to a page）

Q: Can I pass parameters from the page to another page?

A: Yes. There are several different ways to do it:

  • Save the parameters incookiemiddle
  • Save parameters in variables in another window or frame
  • Insert parameters in properties that can be modified (name of the browser window)
  • Take parameters as aQuery stringStitching behind the URL of the destination page

Here is a simple example to demonstrate all these methods of passing parameters. The passed value should be replaced with "It_worked". When you click the button below, the button's event script will have these values ​​(1) in a cookie named parm_value, (2) saved as the top variable top.parm_value and (3) in the properties. The script then boots the browser to parm_get.htm, and its URL contains a value ofURL encodingquery string.

 

7. Find text (Searching for text）

Q:How do I query a specific text string on the page?

A: In Netscape Navigator, you can use(string)Method search; see the Find dialog box. In Internet Explorer or later, create a text-wide object (TRang in the following example) and use (string).

Example: The following script looks for text entered by the user and highlights on the page.

The code for this example is:

  1. <form name="f1" action="" 
  2. onSubmit="if(this.!=null && this.!='')
  3. findString(this.);return false"
  4. >
  5. <input type="text" name=t1 value="" size=20>
  6. <input type="submit" name=b1 value="Find">
  7. </form>
  9. <script language="JavaScript">
  10. <!--
  11. var TRange=null
  13. function findString (str) {
  14.  if (parseInt()<4) return;
  15.  var strFound;
  16.  if (=="Netscape") {
  18.   // NAVIGATOR-SPECIFIC CODE
  20.   strFound=self.find(str);
  21.   if (!strFound) {
  22.    strFound=self.find(str,0,1)
  23.    while ((str,0,1)) continue
  24.   }
  25.  }
  26.  if (("Microsoft")!=-1) {
  28.   // EXPLORER-SPECIFIC CODE
  30.   if (TRange!=null) {
  31.    (false)
  32.    strFound=TRange.findText(str)
  33.    if (strFound) ()
  34.   }
  35.   if (TRange==null || strFound==0) {
  36.    TRange=self.()
  37.    strFound=TRange.findText(str)
  38.    if (strFound) ()
  39.   }
  40.  }
  41.  if (!strFound) alert ("String '"+str+"' not found!")
  42. }
  43. //-->
  44. </script>