Getting a random entry from an array, printing it and deleting in with splice to avoid duplicates

Question

I have the following function to generate country names for a quiz. I want to generate a random name from the array and show it on the screen and then delete it so that I don't have duplicate questions. Someone suggested using splice the way it's shown on the code which I've never used before so I can't figure out why it's not working well. Can you help me find what's wrong? Thanx! Here's the code:

<div>
 <div style="float:left">
<h1> <span id="questionnum"></span>. Can you locate <span id="countryquestion"></span> on the map?</h1>
</div>


<script type="text/javascript">
generateCountry();


function generateCountry(){

filenames = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus", "Belgium", "Bosnia and Herzegovina", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Georgia", "Germany", "Greece", "Hungary", "Iceland", "Ireland", "Italy", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg", "FYROM", "Malta", "Moldova", "Monaco", "Montenegro", "The Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russia", "San Marino", "Serbia", "Slovakia", "Slovenia", "Spain", "Sweden", "Switzerland", "Ukraine", "United Kingdom" ];

filename = filenames.splice(Math.floor(Math.random()*filenames.length), 1);

document.getElementById('countryquestion').textContent = filename[0];

}

</script>

---

edit for Louis

you're right..I just replaced the document.write with the getelementById like below and I'm having some kind of conflict.

document.getElementById('countryquestion').textContent = filename;

I use this function and another one to check if the user has clicked the right country on the map. By adding your code the first countryname appears and when I click on the map nothing happens. I'm not getting any response and the countryname just stays the same as the function is probably not called again. This is the function to take the country name from googlemaps. The only thing that should happen should be the comparison of the filename(your randElement) with the country from google maps and then call the generateCountry() whether the answer was right either wrong but this isn't happening now..why?

 function getCountry(latLng) {
              geocoder.geocode( {'latLng': latLng},
                function(results, status) {
                  if(status == google.maps.GeocoderStatus.OK) {
                    if(results[0]) {
                      for(var i = 0; i < results[0].address_components.length; i++) {
                        if(results[0].address_components[i].types[0] == "country") {
                          if(results[0].address_components[i].long_name == **filename**) {

                                right();
                                generateCountry();
                                numQuestions();
                                updateScore();
                                countRights();
                                showProgress();

                           } else {


                            wrong();
                             updateLives();
                              generateCountry();
                                numQuestions();
                                 showProgress();


                           }
                        }
                      }
                    }


                    else {
                      alert("No results");
                    }
                  }
                  else {

                 water(); 
                  }
                }
              );
      }  

Answer 1

See: http://jsfiddle.net/bXVr9/

var filenames = [ "Albania", "Andorra", "Armenia", "Austria"];

// Get a random index
var index = Math.floor(Math.random() * filenames.length);

// This holds your random name
var randElement = filenames[index];

// Remove it
filenames.splice(index, 1);

document.write("Country: " + randElement + "<br />");
document.write("Remaining: " + filenames + "<br />");