title: Randomize an array with dependent arrays and then have them post to html
body: <p>I would like for the javascript to have a random array for an audio file which is then placed into the audio controls tag in html. Then, depending on which audio file was picked, another randomized array will begin to place an image into a div and so on and so forth. </p>
  
  <p>Also here is the website in question: <a href="http://driglight.com/Learn5.html" rel="nofollow noreferrer">http://driglight.com/Learn5.html</a>
  This website does not currently have randomization implemented.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Learn&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
  
      &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="css/bootstrap-responsive.css"&gt;
      &lt;link rel="stylesheet" href="css/custom-styles.css"&gt;
      &lt;link rel="stylesheet" href="css/font-awesome.css"&gt;
      &lt;link rel="stylesheet" href="css/component.css"&gt;
      &lt;link rel="stylesheet" href="css/font-awesome-ie7.css"&gt;
  
     &lt;script src="js/Timhasnoinput.js"&gt;&lt;/script&gt;
      &lt;!-- &lt;script  src="js/stuff.js"&gt;&lt;/script&gt; --&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--[if lt IE 7]&gt;
          &lt;p class="chromeframe"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="http://browsehappy.com/"&gt;upgrade your browser&lt;/a&gt; or &lt;a href="http://www.google.com/chromeframe/?redirect=true"&gt;activate Google Chrome Frame&lt;/a&gt; to improve your experience.&lt;/p&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html --&gt;
          &lt;div class="header-wrapper"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row-fluid"&gt;
  
                      &lt;div class="site-name"&gt;
                          &lt;h1&gt;Music Website&lt;/h1&gt;
                      &lt;/div&gt;
  
  
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
          &lt;div class="menu"&gt;
  
                      &lt;div class="navbar"&gt;
                          &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                              &lt;i class="fw-icon-th-list"&gt;&lt;/i&gt;
                          &lt;/a&gt;
                          &lt;div class="nav-collapse collapse"&gt;
                              &lt;ul class="nav"&gt;
                                  &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
  
                                  &lt;li&gt;&lt;a href="Learn.html"&gt;Learn&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
                      &lt;/div&gt;
                      &lt;div class="mini-menu"&gt;
          &lt;label&gt;
        &lt;select class="selectnav"&gt;
          &lt;option value="#" selected=""&gt;Home&lt;/option&gt;
  
          &lt;option value="#"&gt;→ Hello&lt;/option&gt;
          &lt;option value="#"&gt;→ Something else here&lt;/option&gt;
          &lt;option value="#"&gt;→ Another action&lt;/option&gt;
          &lt;option value="#"&gt;→ Something else here&lt;/option&gt;
          &lt;option value="#"&gt;About&lt;/option&gt;
          &lt;option value="#"&gt;Learn&lt;/option&gt;
          &lt;option value="#"&gt;Contact&lt;/option&gt;
        &lt;/select&gt;
        &lt;/label&gt;
        &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container bg-white"&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span12 "&gt;
                      &lt;div class="main-caption"&gt;
                          &lt;h1&gt;Music Website&lt;/h1&gt;
                          &lt;h6&gt;Learning Music&lt;/h6&gt;
  
                      &lt;/div&gt;
                      &lt;div class="Timmy2"&gt;
                                      &lt;h4&gt;&lt;a href="Learn4.html"&gt;&lt; Lesson 2&lt;/a&gt;&lt;/h4&gt;
                                      &lt;h6&gt;&lt;/h6&gt;
                                    &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="container bg-white"&gt;
  
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span12"&gt;
                      &lt;div class="banner"&gt;
                      &lt;div class="audiobuttonholder"&gt;
                      &lt;div class="audioholder" style="padding-bottom:24px;"&gt;
                        &lt;audio controls&gt;
                        &lt;source src= audio_1 type="audio/mpeg"&gt;
  
                          hello
                          &lt;/audio&gt; 
                          &lt;/div&gt;
                          &lt;div class="buttonholder"; style="position: absolute; left: 10px; top: 40px;"&gt; 
  
                          &lt;/div&gt;
                      &lt;div class = "numberPage"&gt;
                      Pg. 3 Trebble Cleff
                      &lt;/div&gt;
                          &lt;div class = "control"&gt;
  
  
  
  
  
                          &lt;ul&gt;  
   &lt;div id="div1"  style="display:none; float: right; margin-right: 120px; 
  margin-top: 40px;"  &gt; 
  
   &lt;/div&gt;
   &lt;input type="image" id="myimage1" style="height:200px;width:200px;"   
  onclick="showDivOne()"/&gt; 
  
   &lt;/ul&gt;
  
                          &lt;ul&gt;
  &lt;div id="div2"  style="display:none; float: right; margin-right: 120px;" &gt; 
  
   &lt;/div&gt;
  &lt;input type="image" id="myimage2" style="height:200px;width:200px; padding-
  top:24px;" onclick="showDivTwo()"/&gt;
  &lt;/ul&gt;
  
  &lt;ul&gt;
  &lt;div id="div3"  style="display:none; float: right; margin-right: 120px; 
  padding-top: 40px;" &gt; 
  
  &lt;/div&gt;
  &lt;input type="image" id="myimage3" style="height:200px;width:200px;
  paddingtop:24px;" onclick="showDivThree()"/&gt;
  &lt;/ul&gt;
  
  
  
  
   &lt;ul&gt; 
   &lt;div id="div4"  style="display:none; float: right; margin-right: 120px; 
  margin-
  top: 40px;" &gt; 
  
   &lt;/div&gt;
   &lt;input type="image" id="myimage4" style="height:200px;width:200px;" 
  onclick="showDivFour()" /&gt;
   &lt;/ul&gt;
  
  
  
   &lt;!--
   &lt;div id="welcomeDiv"  style="display:none;" &gt; &lt;input type="image" 
  id="myimage" style="height:150px;width:400px;" src="Continue.png" /&gt;&lt;/div&gt;
  &lt;input type="image" name="answer" src="Continue.png" onclick="showDiv()" /&gt; 
  --&gt;
  
  
  &lt;!--
   &lt;div id="welcomeDiv"  style="display:none;" &gt; 
   &lt;img src = "GoodJob.png"&gt;&lt;/img&gt;
   &lt;/div&gt;
  &lt;input type="image" id = "HaveFun" style="height:200px;width:200px;" src = 
  "HighE.gif" onclick="showDiv()" /&gt;
   --&gt;
  
  
  
  
                          &lt;/div&gt;
              &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
                         &lt;div class="featured-images"&gt;
                          &lt;ul class="grid effect-8" id="grid"&gt;
                            &lt;li&gt;
                              &lt;div class="block"&gt;
                               &lt;div class="Timmy2"&gt;
                                      &lt;h4&gt;&lt;a href="Learn3.html"&gt;&lt; Lesson 2&lt;/a&gt;
  &lt;/h4&gt;
                                      &lt;h6&gt;&lt;/h6&gt;
                                    &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/li&gt;
                          &lt;/ul&gt;
                              &lt;div class="block-content"&gt;
  
                                    &lt;div class="user-info"&gt;
  
                                     &lt;h4&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/h4&gt;
                                     &lt;h6&gt; &lt;/h6&gt;
  
                                     &lt;/div&gt;
  
                                  &lt;div class="user-info"&gt;
  
                                      &lt;h4&gt;&lt;a href="Learn.html"&gt;Learn&lt;/a&gt;&lt;/h4&gt;
                                      &lt;h6&gt; &lt;/h6&gt;
                                  &lt;/div&gt;
                                  &lt;div class="user-info"&gt;
  
                                     &lt;h4&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;
  &lt;/h4&gt;
                                     &lt;h6&gt; &lt;/h6&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
  
  
  
  
      &lt;script&gt;
  
      function() {
      document.getElementById("audio1").innerHTML = rand_audio_1;
      var audio_1 = ["LowATrebbleCleffPianoVC.mp3"],
  ["LowETrebbleCleffPianoVC.mp3"],["LowGTrebbleCleffPianoVC.mp3"],
  ["MidBTrebbleCleffPianoVC.mp3"],["MidCTrebbleCleffPianoVC.mp3"],
  ["MidDTrebbleCleffPianoVC.mp3"];
      var rand_audio_1 = audio_1[Math.floor(Math.random()*audio_1.length)];
      }
      function() {
  
      if (audio_1[0]){
      document.getElementById("rand1").innerHTML =  "&lt;img src='LowA.gif'&gt;";
      var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
      var rand1 = R1[Math.floor(Math.random()* R1.length)];
      } else if(audio_1[1]){
      document.getElementById("rand1").innerHTML = "&lt;img src='LowE.gif'&gt;";
      var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
      var rand1 = R1[Math.floor(Math.random()* R1.length)];
      } else if(audio_1[2]){
      document.getElementById("rand1").innerHTML = "&lt;img src='LowG.gif'&gt;";
      var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
      var rand1 = R1[Math.floor(Math.random()* R1.length)];
      } else if(audio_1[3]){
      document.getElementById("rand1").innerHTML = "&lt;img src='MidB.gif'&gt;";
      var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
      var rand1 = R1[Math.floor(Math.random()* R1.length)];       
      } else if(audio_1[4]){
      document.getElementById("rand1").innerHTML = "&lt;img src='MidC.gif'&gt;";
      var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
      var rand1 = R1[Math.floor(Math.random()* R1.length)];
      } else {
      document.getElementById("rand1").innerHTML = "&lt;img src='MidD.gif'&gt;";
      var R1 = ["myimage1"],["myimage2"],["myimage3"],["myimage4"];
      var rand1 = R1[Math.floor(Math.random()* R1.length)];
      }
      }
  
      function() {
      if (R1[0]) {
      document.getElementById('div1').innerHTML = "&lt;img src='GoodJob.png'&gt;";
      } else if(R1[1]) {
      document.getElementById('div2').innerHTML = "&lt;img src='GoodJob.png'&gt;";
      } else if(R1[2]){
      document.getElementById('div3').innerHTML = "&lt;img src='GoodJob.png'&gt;";
      } else if(R1[3]) {
      document.getElementById('div4').innerHTML = "&lt;img src='GoodJob.png'&gt;";
      } else {
      document.getElementById('div5').innerHTML = "&lt;img src='GoodJob.png'&gt;";
     }
     }
     }
  &lt;/body&gt;
  </code></pre>
  
  <p></p>