Question

Hey this is my first question on this website.

Im creating a webpage for a client, this page needs to be loaded in 1 time and the user can navigate throught the different parts of the website using arrows, these arrows will activate a jquery script that will switch the HTML of a page…

This is the Javascript i use:

<script type="text/javascript">
    function loadPage(div){
        if($("#page_"+div).length != 0){//if the page div exitst, else return false.
            var image = $("#image_"+div).attr('src');
            var title = $("#title_"+div).html();
            var info = $("#info_"+div).html();
            $("#page").html('<img src="'+image+'" />');
            $("#title").html(title);
            alert($("#pageInfo").html());
            return true;
        }else{
            return false;
        } 
    }
    $(document).ready(function(){
        var div=1;   
        loadPage(div);
        //<buttons>
        $("#btnHome").click(function(){
            div = 1;
            loadPage(div);
        });
        $("#btnPrevious").click(function(){
            var success = loadPage((div-1));
            if(success == true){
                div--;
            }
        });
        $("#btnNext").click(function(){
            var success = loadPage((div+1));
            if(success == true){
                div++;
            }
        });
        $("#btnInfo").click(function(){
            $(".pageInfo").slideDown('fast');
        });
        $("#btnClose").click(function(){
            $(".pageInfo").slideUp('fast');
        });
        //</buttons>
    });
</script>

And this is the html:

 <div id="page">
    <div id="pageInfo">
        a
    </div>
</div>

When i alert the variables i’ve set in Javascript i get the wished result, but when i alert:

alert($("#pageInfo").html());

i get ‘null’ as a result, oh and JQuery is included.

Can someone help me out with this information?
Or did i miss essential parts.
-edit:
the rest of the HTML (sourcecode).

<div id="wrapper">



            <div class="pages" id="page_1">

                <h1 id="title_1">Startpunt</h1><img class="pagesImage" id="image_1" src="http://www.naviplan.nl/files/routefiles/1/1/67.jpg">               

                <div class="pagesInfo" id="info_1">INFO TEXT                    <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a>

                </div>

            </div>



            <div class="pages" id="page_2">

                <h1 id="title_2">Geen titel.</h1><img class="pagesImage" id="image_2" src="http://www.jomaverhuur.nl/wp-content/uploads/2011/02/no-image.gif">               

                <div class="pagesInfo" id="info_2">                    <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a>

                </div>

            </div>



            <div class="pages" id="page_3">

                <h1 id="title_3">Geen titel.</h1><img class="pagesImage" id="image_3" src="http://www.jomaverhuur.nl/wp-content/uploads/2011/02/no-image.gif">               

                <div class="pagesInfo" id="info_3">                    <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a>

                </div>

            </div>



            <div class="pages" id="page_4">

                <h1 id="title_4">Geen titel.</h1><img class="pagesImage" id="image_4" src="http://www.jomaverhuur.nl/wp-content/uploads/2011/02/no-image.gif">               

                <div class="pagesInfo" id="info_4">                    <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a>

                </div>

            </div>



            <div class="pages" id="page_5">

                <h1 id="title_5">Geen titel.</h1><img class="pagesImage" id="image_5" src="http://www.jomaverhuur.nl/wp-content/uploads/2011/02/no-image.gif">               

                <div class="pagesInfo" id="info_5">                    <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a>

                </div>

            </div>



            <div class="pages" id="page_6">

                <h1 id="title_6">Geen titel.</h1><img class="pagesImage" id="image_6" src="http://www.jomaverhuur.nl/wp-content/uploads/2011/02/no-image.gif">               

                <div class="pagesInfo" id="info_6">                    <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a>

                </div>

            </div>



            <div class="pages" id="page_7">

                <h1 id="title_7">Eindpunt</h1><img class="pagesImage" id="image_7" src="http://www.naviplan.nl/files/routefiles/1/17/finish56.png">               

                <div class="pagesInfo" id="info_7">                    <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a>

                </div>

            </div>

        <div data-role="header" data-position="inline" data-position="fixed" >

    <a id="btnHome" href="#" data-icon="home">Homepage</a>

    <h1 id="title"></h1>

</div>

Greetings,
Harm.

(im sorry if this question is already asked, but i dont know where to search for.)

Answer 1

It seems from your code at top that pageInfo is class so you can’t alert it using #pageInfo, $("#pageInfo") is used for ID and $(".pageInfo") for class.