Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Reza Sorasti
Reza Sorasti
491 Points

Javascript question

Here is the code for the file index.html

code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li class="selected"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
        <select>
            <option value="index.html" selected>Home</option>
            <option value="about.html">About</option>
            <option value="contact.html">Contact</option>
            <option value="support.html">Support</option>
            <option value="faqs.html">FAQs</option>
            <option value="events.html">Events</option>
        </select>

        <button onclick="myFunction()">Go</button>
    </div>
    <h1>Home</h1>
    <p>This is the home page.</p>

    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>



</body>
</html>

Here is the code for the file about.html

code

<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li class="selected"><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
        <select>
            <option value="index.html">Home</option>
            <option value="about.html" selected>About</option>
            <option value="contact.html">Contact</option>
            <option value="support.html">Support</option>
            <option value="faqs.html">FAQs</option>
            <option value="events.html">Events</option>
        </select>
        <button onclick="myFunction()">Go</button>
    </div>
    <h1>About</h1>
    <p>This is the about page.</p>

    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Here is the Javascript code for the file app.js

code

function myFunction() {
    window.location = document.querySelector("select").val();
}

Why is it what when I choose the About option in the selection drop down box, and click on the Go button, the browser is not taken to the About page and vise versa, why is it that when I choose the Home option in the selection drop down box, and click on the Go button, the browser is not taken to the Home page?

Mathew Tran
Mathew Tran
Courses Plus Student 10,205 Points

You are very close. you will want to use the jquery selector instead of the document selector if you want to use the val method!

But to do that first you need to add to link to jquery in your html pages.

example of getting value with jquery

$("select").val() // Using Val with Jquery Selector

Alternatively, you can use the .value property from document selector to access the value

document.querySelector("select").value

Hope this helps!

Matt

2 Answers

Reza Sorasti
Reza Sorasti
491 Points
Reza Sorasti
Reza Sorasti
491 Points

Mathew - Thanks for your response. My code is now working when I changed val() to value property. How did you find out that there is such a property called, "value"? I don't see the value property in this list: https://www.w3schools.com/jsref/dom_obj_all.asp

Also, The other think that I would like to mention to you is that my English is not great. From my knowledge the word "want" means to desire. When you wrote, "you will want to use the jquary selector...", did you mean I should desire to use the jquary selector... or did you just mean, if I want, I have the option of using the jquary selector, if I want to use the val method? I am assuming the later one is what you meant since no one can tell anyone to desire something :)

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points
Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

val() is used with jQuery library since you are using regular javascript use value property

you need to add an event listener and access value in a different way, something like this could work

let select = document.querySelector("select");

function myFunction() { 
   window.location.href = select.value;
}

select.addEventListener('change', myFunction);