ZuoTi.Pro
Question

I cant complete this assignment, I have tried several ways shown in the tutorial but cant...

I cant complete this assignment, I have tried several ways shown in the tutorial but cant seem to get it to validate, can anyone help? This is a basic JavaScript tutorial and will not validate with Jquery.

Monroe Public Library Denise Kruschev manages the website for the Monroe Public Library in Monroe, Ohio. One of her responsibilities is to add content and links to the site that will be of interest to the library’s patrons. Denise has asked you to create a web page containing links to hundreds of government websites. She knows that a long list of links will fill the page, making navigation within the page difficult.

Denise wants to use “select and go” navigation in which the links are placed within a selection list. When a patron selects a website from the list, the linked site should open automatically. Denise has already set up the selection list and the URLs for each government site; she wants you to write the JavaScript code to load the website chosen via the selection list. Figure 13-64 shows a preview of the web page you will create.

Event Listeners

Return to the mp_links.js file in your editor and create an event listener for the load event that runs an anonymous function.

Within the anonymous function, create the allSelect variable referencing all select elements nested within the govLinks form.

Loop through the allSelect object collection and for each selection list in the collection create an anonymous function for the onchange event. Within this anonymous function, use the href property of the location object to change the page shown in the browser window to the value of the target of the event object that initiated the onchange event.

Document your commands with JavaScript comments.

JavaScript

"use strict";

/*
New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
Tutorial 13
Case Problem 1

Author:
Date:   

Filename: mpl_links.js

*/


document.addEventListener("load",
function() {
var allSelect = document.form.elements("govLinks");
for (var i = 0; i < allSelect.length; i++) {
allSelect[i].onchange =
}

}

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<!--

New Perspectives on HTML5, CSS3, and JavaScript 6th Edition

Tutorial 13

Case Problem 1

Monroe Public Library Government Links

Author:

Date:

Filename: mpl_links.html

-->

<title>Monroe Public Library List of Government Sites</title>

<meta charset="utf-8" />

<link href="mpl_base.css" rel="stylesheet" />

<link href="mpl_layout.css" rel="stylesheet" />

<script src="mpl_links.js" async></script>

</head>

<body>

<header>

<img src="mpl_logo.png" alt="Monroe Public Library" />

<nav id="top">

<ul>

<input type="text" placeholder="Locate a Title" name="gSearch" id="gSearch" />

<label for="gSearch"><img src="mpl_search.png" alt="search" /></label>


</ul>

</nav>

<nav id="middle">

<ul>

<li><a href="#">Materials</a></li>

<li><a href="#">eLibrary</a></li>

<li><a href="#">Events</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Collections</a></li>

<li><a href="#">Support</a></li>

</ul>

</nav>

</header>

<section>

<nav id="left">

<p>Monroe Public Library<br />

580 Main Street<br>

Monroe, OH 45050<br />

(513) 555-0211

</p>

<ul>

<li class="newgroup"><a href="#">Books</a></li>

<li><a href="#">Videos</a></li>

<li><a href="#">Music</a></li>

<li><a href="#">eMedia</a></li>

<li><a href="#">Magazines</a></li>

<li><a href="#">Local History</a></li>

<li class="newgroup"><a href="#">Library Cards</a></li>


<li><a href="#">Card FAQ</a></li>

<li><a href="#">Borrowing &amp; Fees</a></li>

<li><a href="#">Interlibrary Loans</a></li>

<li class="newgroup"><a href="#">MPL Calendar</a></li>

<li><a href="#">Meeting Rooms</a></li>

<li><a href="#">Adult Events</a></li>

<li><a href="#">Teen Events</a></li>

<li><a href="#">Kid Events</a></li>

<li><a href="#">Classes</a></li>

<li class="newgroup"><a href="#">Online Resources</a></li>

<li><a href="#">Ask a Librarian</a></li>

<li><a href="#">Computers &amp; Internet</a></li>

<li><a href="#">Community Info</a></li>

<li class="newgroup"><a href="#">Hours of Operation</a></li>

<li><a href="#">Directions</a></li>

</ul>

</nav>

<article>

<form id="govLinks" name="govLinks">

<h1>Government Sites on the Web</h1>

<p>Select a site from one of the drop-down lists below.</p>

<table>

<tr><td>Executive Branch</td>

<td><select name="executive" id="executive" class="optionLinks">

<option value="#">Select a Web site</option>

<option value="http://www.whitehouse.gov">The White House</option>

<option value="http://www.usda.gov">Department of Agriculture</option>


<option value="http://www.doc.gov">Department of Commerce</option>

<option value="http://www.defenselink.mil">Department of Defense</option>

<option value="http://www.ed.gov">Department of Education</option>

<option value="http://www.energy.gov">Department of Energy</option>

<option value="http://www.hhs.gov">Department of Health and Human Services</option>

<option value="http://www.whitehouse.gov/homeland">Department of Homeland
Security</option>

<option value="http://www.hud.gov">Department of Housing and Urban
Development</option>

<option value="http://www.doi.gov">Department of the Interior</option>

<option value="http://www.usdoj.gov">Department of Justice</option>

<option value="http://www.dol.gov">Department of Labor</option>

<option value="http://www.state.gov">Department of State</option>

<option value="http://www.ustreas.gov">Department of the Treasury</option>

</select>

</td>

</tr>

<tr><td>Legislative Branch</td>

<td><select name="legislative" id="legislative" class="optionLinks">

<option value="#">Select a Web site</option>

<option value="http://www.house.gov">House Web Site</option>

<option value="http://clerk.house.gov/">Clerk of the House</option>

<option value="http://www.senate.gov">Senate Web Site</option>

<option
value="http://www.senate.gov/general/contact_information/senators_cfm.cfm">Senators' Web
Sites</option>

<option
value="http://www.senate.gov/artandhistory/history/common/generic/Senate_Historical_Office.htm">
Senate Historic Office</option>

<option value="http://www.cq.com">Congressional Quarterly</option>

<option value="http://www.loc.gov/">Library of Congress</option>


<option value="http://www.gao.gov/">Government Accountability Office</option>

<option value="http://www.cbo.gov/">Congressional Budget Office</option>

</select>

</td>

</tr>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Hi, I get your question. As you have shown in mpl_links.js contents, I think this would work.

In the allSelect[i].onchange, we need to make an anonymous function in which the location of href can be the target value, whenever the variable allSelect changes.

The window.addEventListener block should be as below:

window.addEventListener("load", function() {
        var allSelect = govLinks.getElementsByClassName("optionLinks");
        for (var i = 0; i < allSelect.length; ++i) {
                allSelect[i].onchange = function(e) {
                        location.href = e.target.value;
                }
        }
});

The main aim here is to retrieves value of whatever input it was called on, so whatever you insert in your input can be accessed through event.target.value

I hope this would help you. If you have any query feel free to ask.

0 0
Add a comment
Know the answer?
Add Answer to:
I cant complete this assignment, I have tried several ways shown in the tutorial but cant...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • This assignment require using different Bootstrap classes for styling. I have used some "class=" (bootstrap) in...

    This assignment require using different Bootstrap classes for styling. I have used some "class=" (bootstrap) in code, but they don't work. In HTML, we need to add < link > to display bootstrap, but I don't know what to do in PHP. <?php $servername = "fdb29.awardspace.net"; $username = "3515976_assignment9"; $password = "Becky516."; $database = "3515976_assignment9"; $port = "3306"; // Create connection $dbconn = mysqli_connect($servername, $username, $password, $database, $port); if($dbconn){ }else{ die("Connection Failed: ".mysqli_connect_error()); } $myQuery = "SELECT p_name, p_desc, p_img,...

  • New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /*...

    New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /* New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 3 Filename: mas_register.js Author: Date: Function List ============= formTest() Performs a validation test on the selection of the conference session package and the conference discount number calcCart() Calculates the cost of the registration and saves data in session storage    writeSessionValues() Writes data values from session storage in to the registration...

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • Hello, I was wondering if you could possibly think of ways to improve my home page then I would l...

    Hello, I was wondering if you could possibly think of ways to improve my home page then I would like you to do so. I know it could be better. Thank you. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <nav class="navbar...

  • I know there are a couple of answers to this question already but they don't match...

    I know there are a couple of answers to this question already but they don't match the sample code we where given. Overview Images, both static and dynamic, appear on most Web sites. There are many different features and functionalities that we can add through the use of JavaScript, including preloading, rollovers, and cycling banner ads. In this assignment, you will work with JavaScript, images, events, and manipulating the DOM to create an interactive image gallery. Hint: Preloading your images...

  • the is my HTML and CSS code. I didn't attach the image or the CSS file...

    the is my HTML and CSS code. I didn't attach the image or the CSS file because of the space limit. two things I wanted to incorporate on this page are to make "MY TOP 3 MUSIC GENRES" blink using javascript and to make the video links autoplay using javascript both should be using javascript requirement: our professor told us not to use <div> or alert. thank you for your help <!DOCTYPE html> <!-- I used w3school for the formatting...

  • In this problem, you will create a selectable “To Do” List. To add a task to...

    In this problem, you will create a selectable “To Do” List. To add a task to this list, the user clicks the Add Task button and enters a description of the task. To delete a task from the list, the user selects the task and then clicks the Delete Task button. Open the HTML and JavaScript files provided as start-up files (index.html from within todo_list_Q.zip file). Then, review the HTML in this file. Note, within the div element, there is...

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT