CODEWITHSUNDEEP
javascripthtml
Praful Bagai
Praful Bagai

Reputation: 17362

$("#id").html(var); does not prints the value. why?

I'm trying to print the next and previous month dynamically in a div by clicking the next and previous links. Though the value gets generated correctly but the value doesn't gets printed in a <div id="month"></div>. Where I'm going wrong. I'm using $("#month").html(curmonthYear);

<html>
    <head>
        <script type="text/javascript">
            var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

                var cur_dat = new Date();
                var curYear = cur_dat.getFullYear();
                var curMonth = cur_dat.getMonth();
                var curMonthYear = month[cur_dat.getMonth()] + ", " + cur_dat.getFullYear();
            function monthNav(nav) {

                if(nav == 'prev') {

                    var newMonth = cur_dat.getMonth() - 1;
                    var newYear = cur_dat.getFullYear();
                    if(newMonth < 0) {
                        newMonth = 11;
                        newYear -= 1;
                    }

                    cur_dat.setMonth(newMonth);
                    cur_dat.setFullYear(newYear);
                    curMonthYear = month[newMonth] + ", " + newYear;
                    alert(curMonthYear); // gives correct date
                    $("#month").html(curMonthYear); // but doesn't prints here.
                    //alert("Prev");


                } else {

                    var newMonth = cur_dat.getMonth() + 1;
                    var newYear = cur_dat.getFullYear();
                    if(newMonth > 11) {
                        newMonth = 0;
                        newYear += 1;
                    }

                    if(newYear == curYear && newMonth > curMonth) {
                        return false;
                    }
                    cur_dat.setMonth(newMonth);
                    cur_dat.setFullYear(newYear);
                    curMonthYear = month[newMonth] + ", " + newYear;
                    alert(curMonthYear); // gives correct date
                    $("#month").html(curMonthYear); // but doesn't prints.

                }

            }

        </script>
    </head>
    <body>
        <a href="#" onclick="monthNav('prev')">Prev</a>
        <div id="month">abc</div>
        <a href="#" onclick="monthNav('next')">Next</a>
    </body>
</html>

Upvotes: 0

Views: 1045

Answers (3)

Yuan Zhaohao
Yuan Zhaohao

Reputation: 584

document.getElementById( 'month' ).innerHTML = curMonthYear;

Upvotes: 1

gp.
gp.

Reputation: 8224

You are using jQuery ($) but not included jquery js in your code.

Either include jquery (from cdn or your own local copy) e.g.:

<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>

OR use native dom selector:

document.querySelector("#month").innerHTML = curMonthYear;

Upvotes: 3

pna
pna

Reputation: 5761

If you are on jQuery, you have to add it as a library in your <head> before you <script> code eg.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Upvotes: 3

Related Questions