为什么以下代码只在这里运行？

Question

使用以下代码我遇到的问题是它只能正常运行。问题可以在radio button选项中看到，该选项会选择在何处选择。

有趣的是，这不适用于Fiddle和我的网页。

有人在这看到错误吗？非常感谢你的帮助。

＆＃13;

＆＃13;

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 < 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 > 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();
}
}

＆＃13;

#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;
}
		

＆＃13;

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<p id="arr1">Test Text</p>
<p id="arr2">Test Text</p>
<p id="arr3">Test Text</p>

<p id="clip1"></p>
<p id="clip2"></p>
<p id="clip3"></p>

<button id="play" class="play">Play</button>
<button id="paused" class="paused">Pause</button>
<button id="reset" class="reset">Reset</button>

<input type="button" id="prev_button" value="<< Prev">
<input type="button" id="next_button" value="Next >>">

<form name=action>		
		<input type="radio" id="Radio1" name="group1" autocomplete="off" onclick="check();"/>		
		<input type="radio" id="Radio2" name="group1" autocomplete="off" onclick="check();"/>		
		<input type="radio" id="Radio3" name="group1" autocomplete="off" onclick="check();"/>
</form>	

＆＃13;

＆＃13;

＆＃13;