469,902 Members | 1,815 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,902 developers. It's quick & easy.

How to change data on html page?

Hi all
i have shuffle function with me which shuffles data in an array and i am displaying the array values in a table along column wise.By an on click event the values in the table has to be shuffled and again they have to be displayed in the table.
shuffle function code is here
Expand|Select|Wrap|Line Numbers
  1. function shuffle()
  2. {
  3.  
  4.  
  5.  
  6.       var randomNumber;
  7.  
  8.       var len=this.length-1;
  9.  
  10.       randomNumber = Math.floor(Math.random()*len);
  11.      // document.write(randomNumber);
  12.  
  13.  
  14.       if(randomNumber > len)
  15.                 {
  16.                 randomNumber =len;
  17.                 }
  18.  
  19.  
  20.       for(var i =0; i <= randomNumber; i++)
  21.       {
  22.  
  23.  
  24.  
  25.             if(i !=len)
  26.                    {
  27.             this[i] = this[i+1];
  28.                      }
  29.           else
  30.           {
  31.           temp =this[i];
  32.  
  33.           this[i]=this[0];
  34.  
  35.           this[0]=temp ;
  36.           }
  37.  
  38.  
  39.  
  40.       }
  41.  
  42. }
  43.  
and i have used this shuffle function as below
Expand|Select|Wrap|Line Numbers
  1. function autoSpin()
  2. {
  3.  
  4.      //var Date.monthNames = new Array('Active','Passive','Bargain','Vegas','Value');
  5.  
  6.     months.shuffle();
  7.  
  8.      var shuffleresults= Date.monthNames.join("br<>");
  9.      var len = shuffleresults.rows.length, i;
  10.             if(shuffleresults.rows.length > 0) {
  11.                 alert("hi");
  12.  
  13.                 Date.monthNames[0] = shuffleresults.rows.item[0].Date.monthNames[0];
  14.                 Date.monthNames[1] = shuffleresults.rows.item[1].Date.monthNames[1];
  15.                 Date.monthNames[2] = shuffleresults.rows.item[2].Date.monthNames[2];
  16.                 Date.monthNames[3] = shuffleresults.rows.item[3].Date.monthNames[3];
  17.                 Date.monthNames[4] = shuffleresults.rows.item[4].Date.monthNames[4];
  18.  
  19.                 //spinnerId = shuffleresults.rows.item[0].spinnerId;
  20.  
  21.  
  22.              }    
  23.             document.getElementById('Date.monthNames[0]').innerHTML = Date.monthNames[0];
  24.             document.getElementById('Date.monthNames[1]').innerHTML = Date.monthNames[1];
  25.             document.getElementById('Date.monthNames[2]').innerHTML = Date.monthNames[2];
  26.             document.getElementById('Date.monthNames[3]').innerHTML = Date.monthNames[3];
  27.             document.getElementById('Date.monthNames[4]').innerHTML = Date.monthNames[4];
  28.  
  29.  
  30.       Date.dayNames.shuffle(); 
  31.       //var Date.dayNames=new Array('LEAPS','Earnings','Economic','Weekly','Daily');
  32.  
  33.      var shuffleresults1= Date.dayNames.join("<br>");
  34.      var len = shuffleresults1.columns.length, i;
  35.             if(shuffleresults1.columns.length > 0) {
  36.  
  37.  
  38.                 Date.dayNames[0] = shuffleresults1.columns.item[0].Date.dayNames[0];
  39.                 Date.dayNames[1] = shuffleresults1.columns.item[1].Date.dayNames[1];
  40.                 Date.dayNames[2] = shuffleresults1.columns.item[2].Date.dayNames[2];
  41.                 Date.dayNames[3] = shuffleresults1.columns.item[3].Date.dayNames[3];
  42.                 Date.dayNames[4] = shuffleresults1.columns.item[4].Date.dayNames[4];
  43.             }
  44.                 //spinnerId = shuffleresults1.columns.item[0].spinnerId;
  45.  
  46.  
  47.  
  48.             document.getElementById('Date.dayNames[0]').innerHTML = Date.dayNames[0];
  49.             document.getElementById('Date.dayNames[1]').innerHTML = Date.dayNames[1];
  50.             document.getElementById('Date.dayNames[2]').innerHTML = Date.dayNames[2];
  51.             document.getElementById('Date.dayNames[3]').innerHTML = Date.dayNames[3];
  52.             document.getElementById('Date.dayNames[4]').innerHTML = Date.dayNames[4];
  53.  
  54.  
  55.  
  56. //var Date.yearNames=new Array('2$','1$','50 cents','25 cents','5 cents');      
  57. Date.yearNames.shuffle();
  58.  
  59.      var shuffleresults2= Date.yearNames.join("<br>");
  60.      var len = shuffleresults2.columns.length, i;
  61.             if(shuffleresults2.columns.length > 0) {
  62.  
  63.  
  64.                 Date.yearNames[0] = shuffleresults2.columns.item[0].Date.yearNames[0];
  65.                 Date.yearNames[1] = shuffleresults2.columns.item[1].Date.yearNames[1];
  66.                 Date.yearNames[2] = shuffleresults2.columns.item[2].Date.yearNames[2];
  67.                 Date.yearNames[3] = shuffleresults2.columns.item[3].Date.yearNames[3];
  68.                 Date.yearNames[4] = shuffleresults2.columns.item[4].Date.yearNames[4];
  69.  
  70.                 //spinnerId = shuffleresults2.rows.item[0].spinnerId;
  71.  
  72.  
  73.             }            
  74.             document.getElementById('Date.yearNames[0]').innerHTML = Date.yearNames[0];
  75.             document.getElementById('Date.yearNames[1]').innerHTML = Date.yearNames[1];
  76.             document.getElementById('Date.yearNames[2]').innerHTML = Date.yearNames[2];
  77.             document.getElementById('Date.yearNames[3]').innerHTML = Date.yearNames[3];
  78.             document.getElementById('Date.yearNames[4]').innerHTML = Date.yearNames[4];
  79.  
  80.  
for reference please visit the url http://www.urbanspoon.com/spin-widget
for the spin button in that application i have used an on click event with function autoSpin() and i have defined the function above.The arrays displayed here are
Date.monthNames,Date.dayNames,Date.yearNames please check this one and if you find any errors please revert back to me
Thanks in advance
Oct 13 '10 #1
2 1401
acoder
16,027 Expert Mod 8TB
Firstly, check the error console. What errors do you see?

Do you have a page with the code in action?
Oct 14 '10 #2
i have a code for single array to shuffle here it is
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>How to shuffle an array in JavaScript</title>
  4. <script language="JavaScript">
  5.  
  6. Array.prototype.shuffle = shuffle;
  7.  
  8. function shuffle()
  9. {
  10.  
  11.       var tempSlot;
  12.  
  13.       var randomNumber;
  14.  
  15.  
  16.       for(var i =0; i != this.length; i++)
  17.       {
  18.  
  19.             randomNumber = Math.floor(Math.random() * this.length);
  20.  
  21.             tempSlot = this[i];
  22.  
  23.             this[i] = this[randomNumber];
  24.  
  25.             this[randomNumber] = tempSlot;
  26.  
  27.  
  28.  
  29.       }
  30.  
  31. }
  32.  
  33. function shuffleNumbers()
  34. {
  35.  
  36.       var numbers = new Array('Active','Passive','Bargain','Vegas','value');
  37.  
  38.       numbers.shuffle();
  39.  
  40.       var numbersAfterShuffle = numbers.join("<br>");
  41.  
  42.       document.getElementById("result").innerHTML = numbersAfterShuffle;
  43.  
  44.  
  45. }
  46.  
  47. </script>
  48. </head>
  49.  
  50. <body onload="javascript:shuffleNumbers();">
  51.  
  52. <div id="result"></div>
  53.  
  54. <input type='button' onclick='shuffleNumbers()' value='Shuffle'/>
  55.  
  56. </body>
  57. </html>
  58.  
and i applied the same logic to all the three rows in my application.
Oct 14 '10 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Jon Haakon | last post: by
6 posts views Thread by Moist | last post: by
3 posts views Thread by mukeshgupta.WD | last post: by
3 posts views Thread by William Krick | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.