Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    75
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Smile Displaying info from javascript array randomly.

    Hi all,

    I want to display varying company information from a javascript array randomly each time the page is refreshed. My problem is that the each piece of company information must be split up into 3-4 array elements since I have set up spans in the body where the information go accordingly and as such I don't how to randomize that.

    The relevant code is (I will only give two company examples as it's a long list):

    Code:
    <script type="text/javascript" language='javascript'>    
         function compInfo(comp){
          var companyInfo = new Array();        
          if(comp == document.getElementById('test').innerHTML)
         {
           //insert business name here.    
           companyInfo[0] = 'Test';
           //insert business type here.
           companyInfo[1] = 'Media';
           //insert street name here.
           companyInfo[2] = 'Test Road.';
           //insert actual opening time here.
           companyInfo[3] = '5am - 10pm';
           //insert actual closing time here.
           companyInfo[4] = 'Christmas'; 
           //insert contact info here.
           companyInfo[5] = 'test'; 
           //insert web address here.      
           companyInfo[6] = '<a href="http://www.test.com" style="color: #0092DD; text-decoration: none;">test.com</a>';
           //insert image link here.
           companyInfo[7] = 'images/test.jpg';                
         }
    
          if(comp == document.getElementById('test1').innerHTML)
         {
          //insert business name here.    
           companyInfo [0] = 'Test1';
           //insert business type here.
           companyInfo [1] = 'Club';
           //insert street name here.
           companyInfo[2] = 'Test1 Road.';
           //insert actual opening time here.
           companyInfo[3] = '5am - 10pm';
           //insert actual closing time here.
           companyInfo[4] = 'Christmas'; 
           //insert contact info here.
           companyInfo[5] = 'test1'; 
           //insert web address here.      
           companyInfo[6] = '<a href="http://www.test1.com" style="color: #0092DD; text-decoration: none;">test1.com</a>';
           //insert image link here.
           companyInfo[7] = 'images/test1.jpg';
       }
    
          document.getElementById('title').innerHTML =companyInfo[0];
           document.getElementById('name').innerHTML = companyInfo[1]; 
           document.getElementById('street').innerHTML = companyInfo[2]; 
           document.getElementById('open').innerHTML = 'Open'; 
           document.getElementById('otime').innerHTML = companyInfo[3]; 
           document.getElementById('close').innerHTML = 'Closed'
           document.getElementById('ctime').innerHTML = companyInfo[4];     
           document.getElementById('contact').innerHTML = 'Contact';
           document.getElementById('cinfo').innerHTML = companyInfo[5];  
           document.getElementById('web').innerHTML = companyInfo[6];   
           document.getElementById('image').style.display =  'block';     
           document.getElementById('image').src =  companyInfo[7]; 
    
    
    }
    </script>
    </head>
    <body>
    <SPAN ID='test' onclick="compInfo(document.getElementById('test').innerHTML);"><b>Test</b></SPAN>
    <SPAN ID='test1' onclick="compInfo(document.getElementById('test1').innerHTML);"><b>Test1</b></SPAN>
    
    //info shown here:
    <div style='text-overflow: ellipsis;'>
                          <table cellpadding='0' cellspacing='0' border='0' style='height:178px; width:185px;'>
                          
                            <tr>                         
                               
                                                 
                                <td align="left" style='height:25px;'>
    
                                   <b><SPAN ID='title'  ></SPAN></b>
                                </td>
                            
                            </tr>
                            
                            <tr>                        
                                 
                            
                                <td align="left" >
                                    
                                    
                                    
                                      <SPAN ID='name' ></SPAN>
                                      
                                      <br />
                                      
                                      
                                      <SPAN ID='street'></SPAN>
                                      
                                      <div style='height:8px;'>
    
                                      
                                      </div>
                                      
                                      <SPAN ID='open'></SPAN>
                                      
                                      <br />
                                      
                                      <SPAN ID='otime'></SPAN>
                                      
                                      <br />
                                      
                                      <SPAN ID='close'></SPAN>
                                      
                                      <br />
                                      
                                      <SPAN ID='ctime'></SPAN>
                                      
                                      <br /> 
                                      
                                      <div style='height:8px;'>
    
                                      
                                      </div>
                                      
                                      <SPAN ID='contact'></SPAN>
                                      
                                      <br />
                                      
                                      <SPAN ID='cinfo'></SPAN>                         
                                      
                                      <SPAN ID='web'></SPAN>
                                       
                                      <img ID='image' style='display:none;'></img>  
                                    
                                    
                                </td>
                                
                                
                            
                            </tr>                      
                          
                        
                          
                          </table>
                      
                      
                      </div>
    
    </body>
    So essentially the process is:
    1. The person clicks on the company name.
    2. Relevant information from the array is shown in the div.

    But what I want is that on startup, information about a random company is shown automatically. How can I achieve this?

    Thanks.

  • #2
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi function randOrd(){
    return (Math.round(Math.random())-0.5); }

    We can now randomize any array. The following example shows how:

    anyArray = new Array('3','a','5','F','x','47');
    anyArray.sort( randOrd );
    document.write('Random : ' + anyArray + '<br />';

    Hope it helps

    Thanks and Regards

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    You mean this?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function Info( nm, bt, st, tms, tme, con, url, img )
    {
        this.companyName = nm;
        this.businessType = bt;
        this.streetAddress = st;
        this.openingTime = tms;
        this.closingTime = tme;
        this.contact = con;
        this.link = url;
        this.image = img;
    }
    
    var companies = [
        new Info("Test","Media","Test Road","5am - 10pm","Christmas","test",
                      '<a href="http://www.test.com" style="color: #0092DD; text-decoration: none;">test.com</a>',
                      'images/test.jpg'),
        new Info("Test1","Club","Test1 Road", ... etc. ... ),
        new Info( ... ),
        ...
        new Info( ... )
        ];
    
    function showInfo( n )
    {
        var companyInfo = companies[n];
        document.getElementById("name") = companyInfo.companyName;
        document.getElementById("street") = companyInfo.streetAddress;
        ... etc. ...
    }
    </script>
    </head>
    <body>
    <script type="text/javascript">
    for ( var c = 0; c < companies.length; ++c )
    {
        var cname = companies[c].companyName;
        document.write('<a href="#" onclick="showInfo('+c+'); return false;">'
                             + cname + '</a><br/>\n');
    }
    </script>
    ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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