title: Why is the following code only running here?
body: <p>With the following code I have the problem that it only runs  here properly . The problem can be seen in the <code>radio button</code> selection, which ageht what was selected where.</p>
  
  <p>Interestingly, this does not work on <a href="https://jsfiddle.net/uwrt8zad/" rel="nofollow noreferrer">Fiddle</a> and on my page.</p>
  
  <p>Does anyone see a mistake here? Many thanks for the help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var currentArray = -1;
  var arrays = [
      [ "Argument arr0,1", "Argument arr0,2", "Argument arr0,3", ],
      [ "Argument arr1,1", "Argument arr1,2", "Argument arr1,3", ],
      [ "Argument arr2,1", "Argument arr2,2", "Argument arr2,3", ]
  ];
  
  var renderArray = function renderArray( ary ) {
      document.querySelector( '#arr1' ).textContent = ary[ 0 ];
      document.querySelector( '#arr2' ).textContent = ary[ 1 ];
      document.querySelector( '#arr3' ).textContent = ary[ 2 ];
  
  };
  
  var previous = function previous( event ) {
      currentArray -= 1;
      if ( currentArray &lt; 0 ) currentArray = arrays.length - 1;
           renderArray( arrays[ currentArray ] );
      
      if ( currentArray == 0 ) {
           clip1.click();
      }  
      if ( currentArray == 1 ) {
           clip2.click();
      }  
      if ( currentArray == 2 ) {
           clip3.click();
      }
      
      document.getElementById('Radio1').checked = false;
      document.getElementById('Radio2').checked = false;
      document.getElementById('Radio3').checked = false;
  };
  
  var next = function next( event ) {
      currentArray += 1;
      if ( currentArray &gt; arrays.length - 1 ) currentArray = 0;
           renderArray( arrays[ currentArray ] );
      
      if ( currentArray == 0 ) {
           clip1.click();
      }  
      if ( currentArray == 1 ) {
           clip2.click();
      }  
      if ( currentArray == 2 ) {
           clip3.click();
      } 
   
      document.getElementById('Radio1').checked = false;
      document.getElementById('Radio2').checked = false;          
      document.getElementById('Radio3').checked = false;                                                                                                         
  };
   
      document.querySelector( '#prev_button' ).addEventListener( 'click', previous );
      document.querySelector( '#next_button' ).addEventListener( 'click', next );
  
  var check = function check() {
      if ( document.getElementById( 'Radio1' ).checked ) {      
    console.log( 'radio button 1 is checked ' + 'with array ' + currentArray );
      
      } else if ( document.getElementById( 'Radio2' ).checked ) {      
    console.log( 'radio button 2 is checked ' + 'with array ' + currentArray );
      
      } else if ( document.getElementById( 'Radio3' ).checked ) {      
    console.log( 'radio button 3 is checked ' + 'with array ' + currentArray );
      }
  }
  
  var listener = new THREE.AudioListener();  
  var audioLoader = new THREE.AudioLoader();
  
  var clip1 = document.querySelector('#clip1');
      clip1.addEventListener('click', function () {
      loadClip('https://cdn.rawgit.com/mrdoob/three.js/master/examples/sounds/358232_j_s_song.mp3');   
  });
  
  var clip2 = document.querySelector('#clip2');
      clip2.addEventListener('click', function () {
      loadClip('https://cdn.rawgit.com/mrdoob/three.js/master/examples/sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3');
  });
   
  var clip3 = document.querySelector('#clip3');
      clip3.addEventListener('click', function () {
      loadClip('https://cdn.rawgit.com/mrdoob/three.js/master/examples/sounds/358232_j_s_song.mp3');
  });
    
    
  var audioLoaded = false,    
      result 
   
  function loadClip( audioUrl ) {
      audioLoaded = false 
   
      console.log(`\nLoading sound...`);  
      audioLoader.load( audioUrl, function( buffer ) {
      sound = new THREE.PositionalAudio( listener );     
      sound.setBuffer( buffer );
      sound.setRefDistance( 20 );
      sound.setLoop(false);
      sound.setVolume(5);
      console.log(`\nAudio finished loading!`);
      audioLoaded = true       
  }); 
   
  play.onclick = function playClip() {
      console.log( `\nplayClip()` );
      play.style.background = "#92ddb8";   
     
      reset.disabled = false;
      play.disabled = true;
      paused.disabled = false;
        
      sound.play();   
  }
  
  reset.onclick = function resetClip() {  
      console.log( `\nresetClip()` );    
      play.style.background = "";
      play.style.color = "";      
        
      stop.disabled = true;
      play.disabled = false;
      paused.disabled = false;
        
      sound.stop()
      document.getElementById('clip1').checked = false;
      document.getElementById('clip2').checked = false;
      document.getElementById('clip3').checked = false;
      console.clear()
  }
     
  paused.onclick = function pausedClip() {  
      console.log( `\npausedClip()` );    
      play.style.background = "";
      play.style.color = "";  
  
      stop.disabled = false;
      play.disabled = false;
      paused.disabled = true;
        
      sound.pause();
  }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#Radio1 {    
    margin-top: -267px;
    margin-left: 0px;
    vertical-align:middle;
  }  
  #Radio2 {   
    margin-top: -197px;
    margin-left: -20px;
    vertical-align:middle;
  }   
  #Radio3 {    
    margin-top: -125px;
    margin-left: -20px;
    vertical-align:middle;
  }  
  #arr1 {
    font-family:Arial,sans-serif; 
    font-size: 1em; 
    color:black;
    margin-top: 0px;
    margin-left: 20px;
  }
  #arr2 {
    font-family:Arial,sans-serif; 
    font-size: 1em; 
    color:black;
    margin-top: 0px;
    margin-left: 20px;
  }
  #arr3 {
    font-family:Arial,sans-serif; 
    font-size: 1em; 
    color:black;
    margin-top: 0px;
    margin-left: 20px;
  }
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"&gt;&lt;/script&gt;
  
  &lt;p id="arr1"&gt;Test Text&lt;/p&gt;
  &lt;p id="arr2"&gt;Test Text&lt;/p&gt;
  &lt;p id="arr3"&gt;Test Text&lt;/p&gt;
  
  &lt;p id="clip1"&gt;&lt;/p&gt;
  &lt;p id="clip2"&gt;&lt;/p&gt;
  &lt;p id="clip3"&gt;&lt;/p&gt;
  
  &lt;button id="play" class="play"&gt;Play&lt;/button&gt;
  &lt;button id="paused" class="paused"&gt;Pause&lt;/button&gt;
  &lt;button id="reset" class="reset"&gt;Reset&lt;/button&gt;
  
  &lt;input type="button" id="prev_button" value="&lt;&lt; Prev"&gt;
  &lt;input type="button" id="next_button" value="Next &gt;&gt;"&gt;
  
  &lt;form name=action&gt;  
    &lt;input type="radio" id="Radio1" name="group1" autocomplete="off" onclick="check();"/&gt;  
    &lt;input type="radio" id="Radio2" name="group1" autocomplete="off" onclick="check();"/&gt;  
    &lt;input type="radio" id="Radio3" name="group1" autocomplete="off" onclick="check();"/&gt;
  &lt;/form&gt; </code></pre>
  </div>
  </div>
  </p>