Drop-Down List using Javascript HTML and jQuery

Question

I'm trying to create a function in javascript that will see what day it is and depending on a day have a certain drop box list appear. However, for some reason it won't work and I'm not sure where the syntax error is in my code.
HTML:

<html>
  <head></head> 
    <body>
        <div class="Questions">
            <div id="myAnswers" style="display : none">>
                <div id="A">
                    <p><strong>Where are you Studying</strong></p>
                    <select>
                        <option value disabled selected>Choose Location</option>
                        <option value="1">Answer 1</option>
                        <option value="1">Answer 2</option>
                        <option value="1">Answer 3</option>
                        <option value="1">Answer 4</option>
                        <option value="1">Answer 5</option>
                        <option value="1">Answer 6</option>
                    </select>
                </div>
                <div id="B" style="display : none">
                    <select>
                        <option value disabled selected>Choose Answer</option>
                        <option value="1">Answer 1</option>
                        <option value="1">Answer 2</option>
                        <option value="1">Answer 3</option>
                        <option value="1">Answer 4</option>
                    </select>
                </div>
            </div>
        </div>
    </body>
</html>

Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var day= new Date();
        var weekday= day.getDay();
        $("#A","#B").hide();
        function showAnswer(){
            if(weekday==3 || weekday==4){
            $("#B").show();
        }else{
            $("#A").show();
        }
        }
        window.onload=showAnswer;
    </script>

What exactly is the problem? "It doesn't work" isn't really enough info. Besides, you have an outer div (the container for both #A and #B) which have display: none; on it - you never do anything with that, so it will never show anything. — junkfoodjunkie
– junkfoodjunkie, Commented Dec 27, 2016 at 23:58
I think you wanted to write var day = new Date();. That would be a good point to start. — PeterKA
– PeterKA, Commented Dec 28, 2016 at 0:01
Day is not a constructor, you should use new Date(); instead. There is also an extra '>' in your HTML <div id="myAnswers" style="display : none">>. Could you clarify how it should works? — Andrés Andrade
– Andrés Andrade, Commented Dec 28, 2016 at 0:02
The code won't run, even after making corrections, when I try to launch the website locally the javascript won't run. — Josh
– Josh, Commented Dec 28, 2016 at 2:10

PeterKA · Accepted Answer · 2016-12-28 00:12:39Z

A few issues to fix before your code can work:

As noted by @junkfoodjunkie you do not need the style="display:none;"
Use new Date(), not new Day()
Use $("#A,#B").hide(), not $("#A","#B")
Feel free to liberally use jQuery since ... :)

$(function() {
   var day= new Date();
   var weekday= day.getDay();
   $("#A,#B").hide();
   function showAnswer(weekday) {
       if(weekday==3 || weekday==4) {
           $("#B").show();
       } else {
           $("#A").show();
       }
    }
    showAnswer( weekday );
    console.log( weekday );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Questions">
            <div id="myAnswers">
                <div id="A">
                    <p><strong>Where are you Studying</strong></p>
                    <select>
                        <option value disabled selected>Choose Location</option>
                        <option value="1">Answer 1</option>
                        <option value="1">Answer 2</option>
                        <option value="1">Answer 3</option>
                        <option value="1">Answer 4</option>
                        <option value="1">Answer 5</option>
                        <option value="1">Answer 6</option>
                    </select>
                </div>
                <div id="B">
                    <select>
                        <option value disabled selected>Choose Answer</option>
                        <option value="1">Answer 1</option>
                        <option value="1">Answer 2</option>
                        <option value="1">Answer 3</option>
                        <option value="1">Answer 4</option>
                    </select>
                </div>
            </div>
        </div>

Collectives™ on Stack Overflow

Drop-Down List using Javascript HTML and jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related