Js selects and moves the navigation menu sample code

  • 2020-03-30 03:45:21
  • OfStack

Implement HTML interface


<!DOCTYPE html>
<html>
<head>
<title>Select and Go Navigation</title>
<script src="script01.js"></script>
<link rel="stylesheet" href="script01.css" rel="external nofollow" >
</head>
<body>
<form action="gotoLocation.cgi" class="centered">
<select id="newLocation">
<option selected>Select a topic</option>
<option value="script06.html">Cross-checking fields</option>
<option value="script07.html">Working with radio buttons</option>
<option value="script08.html">Setting one field with another</option>
<option value="script09.html">Validating Zip codes</option>
<option value="script10.html">Validating email addresses</option>
</select>
<noscript>
<input type="submit" value="Go There!">
</noscript>
</form>
</body>
</html>

Implement menu navigation


window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById ("newLocation");
var newPage = newLoc.options [newLoc.selectedIndex].value;
if (newPage != "") {
window.location = newPage;
}
}

The following is the source code analysis
1.

Window. The onload = initForm;
Window. The onunload = function () {};
The initForm() function is called when the window loads. The next line needs to be explained because it is a workaround for dealing with some browser quirks.

When the window is unloaded (that is, the window is closed or the browser goes to a different url), we call an anonymousfunction, which has no name. In this example, not only does the function have no name, it doesn't do anything at all. This function is provided because onunload must be set to something, otherwise the onload event will not be triggered when the browser's back button is clicked, because pages are cached in some browsers, such as Firefox and Safari. Having onunload do anything prevents the page from being cached, so an onload event occurs when the user steps back.

Anonymity is the absence of a name between function and (). This is the easiest way to trigger an onunload without letting it do anything. As in any function, curly braces contain the contents of the function. The curly braces here are empty because this function doesn't do anything.

2.

Document. The getElementById (" newLocation "). The selectedIndex = 0;
Document. The getElementById (" newLocation "). Onchange = jumpPage;
In the initForm() function, the first line gets the menu on the HTML page (its id is newLocation) and sets its selectedIndex property to zero, which causes it to show the Select a topic.
The second line causes the script to call the jumpPage() function when the menu selection changes.

3.

Var newLoc = document. GetElementById (" newLocation ");
In the jumpPage() function, the newLoc variable looks for the value that the visitor selected in the menu.

4.

5.

If (brought! {= "")
Window. The location = brought;
The condition statement first checks that the newPage is not null. In other words, if newPage has a value, let the window go to
The URL specified by the selected menu item.


Related articles: