SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to assign different static values to different variables

    Hello,
    I'm trying to learn JavaScript on my own and am using a Dashcode example (if anybody uses Dashcode, the example is the "Browser" web application template that is shown when Dashcode opens).

    Briefly, the JavaScript generates a list of "Locations" in the USA:

    Code JavaScript:
    // Sample data.  Some applications may have static data like this, but most will want to use information fetched remotely via XMLHttpRequest.
    var parks = [
        { name: "Acadia", location: "Maine, USA" }, 
        { name: "Bryce Canyon", location: "Utah, USA" }, 
        { name: "Carlsbad Caverns ", location: "New Mexico, USA" },
    etc
    Clicking on any of these locations takes you to a separate page that states the same text for each location (last line of code below):

    "The scenery in "Location" is amazing this time of the year.

    Code JavaScript:
    // When the park is set, this controller also updates the DOM for the detail page appropriately.  As you customize the design for the detail page, you will want to extend this code to make sure that the correct information is populated into the detail UI.
            var detailTitle = document.getElementById('detailTitle');
            detailTitle.innerHTML = this._park.name;
            var detailLocation = document.getElementById('detailLocation');
            detailLocation.innerHTML = this._park.location;
            var detailDescription = document.getElementById('detailDescription');
            detailDescription.innerHTML = "The scenery in " + this._park.name + " is amazing this time of year!";
        }
     
    };

    I want to retain the layout and structure but, depending on the "Location" have different text for each of the new pages (not "the scenery is amazing etc).

    Would someone please get me going on how to achieve this, please? I do not know where to start. If someone could supply me with the code that would work, I would be very grateful.

    Many thanks.

  2. #2
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    add another variable in your data as shown below

    Code JavaScript:
    var parks = [
        { name: "Acadia", location: "Maine, USA", text: 'New text' },
        { name: "Bryce Canyon", location: "Utah, USA", text: 'Second text text' },
        { name: "Carlsbad Caverns ", location: "New Mexico, USA", , text: 'What what what' },

    and change javascript
    Code JavaScript:
    var detailDescription = document.getElementById('detailDescription');
            detailDescription.innerHTML = this.text;

    I hope this helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your helpful reply ........ except.

    Except I copied and pasted your amendments, ran the script and the display of the text that I entered was "undefined"

    Do I have to declare that "text" is a variable somewhere?

    To save wasting your (and anyone else's) time, here is the script as it is now.
    Code JavaScript:
    /* 
     This file was generated by Dashcode.  
     You may edit this file to customize your widget or web page 
     according to the license.txt file included in the project.
     */
     
    var listController = {
        // This object acts as a controller for the list UI.
        // It implements the dataSource methods for the list.
     
        numberOfRows: function() {
            // The List calls this dataSource method to find out how many rows should be in the list.
            return parks.length;
        },
     
        prepareRow: function(rowElement, rowIndex, templateElements) {
            // The List calls this dataSource method for every row.  templateElements contains references to all elements inside the template that have an id. We use it to fill in the text of the rowTitle element.
            if (templateElements.rowTitle) {
                templateElements.rowTitle.innerText = parks[rowIndex].name;
            }
     
            // We also assign an onclick handler that will cause the browser to go to the detail page.
            var self = this;
            var handler = function() {
                var park = parks[rowIndex];
                detailController.setPark(park);
                var browser = document.getElementById('browser').object;
                // The Browser's goForward method is used to make the browser push down to a new level.  Going back to previous levels is handled automatically.
                browser.goForward(document.getElementById('detailLevel'), park.name);
            };
            rowElement.onclick = handler;
        }
    };
     
    var detailController = {
        // This object acts as a controller for the detail UI.
     
        setPark: function(park) {
            this._park = park;
            this._representedObject = park.name;
     
            // When the park is set, this controller also updates the DOM for the detail page appropriately.  As you customize the design for the detail page, you will want to extend this code to make sure that the correct information is populated into the detail UI.
            var detailTitle = document.getElementById('detailTitle');
            detailTitle.innerHTML = this._park.name;
            var detailLocation = document.getElementById('detailLocation');
            detailLocation.innerHTML = this._park.location;
            var detailDescription = document.getElementById('detailDescription');
            detailDescription.innerHTML = this.text;
        }
     
    };
     
    //
    // Function: load()
    // Called by HTML body element's onload event when the web application is ready to start
    //
    function load()
    {
        dashcode.setupParts();
    }
     
    // Sample data.  Some applications may have static data like this, but most will want to use information fetched remotely via XMLHttpRequest.
    var parks = [
        { name: "Acadia", location: "Maine, USA", text: "first text"}, 
        { name: "Bryce Canyon", location: "Utah, USA", text: "first text"}, 
        { name: "Carlsbad Caverns ", location: "New Mexico, USA", text: "second text"}, 
        { name: "Cuyahoga Valley", location: "Ohio, USA", text: "third text"}, 
        { name: "Death Valley", location: "California, USA", text: "fourth text"}, 
        { name: "Denali Preserve", location: "Alaska, USA", text: "fifth text"}, 
        { name: "Grand Canyon", location: "Arizona, USA", text: "sixth text"}, 
        { name: "Haleakala", location: "Hawaii, USA", text: "seventh text"}, 
        { name: "Joshua Tree", location: "California, USA", text: "eighth text"}
    ];

    Many thanks

  4. #4
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, sorry my mistake
    use
    Code:
    detailDescription.innerHTML = this._park.text;

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much - you are a star and now, hopefully, I can get to grips with the rest!

    Thank you very much again. Worked perfectly!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •