CODEWITHSUNDEEP
javascriptjqueryhtml
Josh
Josh

Reputation: 21

Drop-Down List using Javascript HTML and jQuery

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>

Upvotes: 0

Views: 86

Answers (1)

PeterKA
PeterKA

Reputation: 24638

A few issues to fix before your code can work:

  1. As noted by @junkfoodjunkie you do not need the style="display:none;"
  2. Use new Date(), not new Day()
  3. Use $("#A,#B").hide(), not $("#A","#B")
  4. 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>

Upvotes: 1

Related Questions