An array filled with unique and non-repeating elements

I want to display random country flags next to each other, making sure they do not match. However, my specific case requires a unique solution for dealing with arrays:

function displayRandomFlags() {
var flagurls = ["ZPlo8tpmp/chi","cJBo8tpk6/sov","QyLo8tpkm/rus","68so8tpl4/pol","x1Ro8tplj/nor","TT3o8tplv/lit","IsZo8tpma/isr"];
var randomize = 'url("http://static.tumblr.com/zicio7x/'+flagurls[Math.floor(Math.random()*flagurls.length)]+'.png")';
var randomize2 = 'url("http://static.tumblr.com/zicio7x/'+flagurls[Math.floor(Math.random()*flagurls.length)]+'.png")';
document.getElementById("th1").style.backgroundImage = randomize;
document.getElementById("th2").style.backgroundImage = randomize2;
javascriptarrays

Answer №1

Implementing a while loop:

function generateFlags () {
  var flagUrls = ["ZPlo8tpmp/chi","cJBo8tpk6/sov","QyLo8tpkm/rus","68so8tpl4/pol","x1Ro8tplj/nor","TT3o8tplv/lit","IsZo8tpma/isr"];
  var randomFlag1 = 'url("http://static.tumblr.com/zicio7x/'+flagUrls[Math.floor(Math.random()*flagUrls.length)]+'.png")';
  var randomFlag2 = randomFlag1;

  while (randomFlag2 === randomFlag1 ) {
    randomFlag2 = 'url("http://static.tumblr.com/zicio7x/'+flagUrls[Math.floor(Math.random()*flagUrls.length)]+'.png")';
  }

  document.getElementById("th1").style.backgroundImage = randomFlag1;
  document.getElementById("th2").style.backgroundImage = randomFlag2;
}

Check out this JSFiddle for an example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Detecting Changes in Angular Only Works Once when Dealing with File Input Fields

Issue arises with the file input field as it only allows uploading one file at a time, which needs to be modified. Uploading a single file works fine. However, upon attempting to upload multiple files, it appears that the "change" handler method is not tr ...

javascriptangularfileinputonchange

The plugin's element is not compatible with jQuery methods

This particular plugin is designed to enhance the appearance of checkbox inputs. It creates a more visually appealing version of standard checkboxes. However, I have encountered an issue with one of the variables in the code. Let's discuss the theLab ...

javascriptjqueryhtmlcssjquery-plugins

Executing a function to erase the stored value in local storage during an Angular unit test

Looking to verify whether the localStorage gets cleared when I execute my function. Component ngOnInit() { // Logging out when reaching login screen for login purposes this.authService.logout(); } authService logout() { // Removing logged i ...

javascriptangulartypescriptunit-testingangular-unit-test

Suggestions to update arbitrary content at a 5-second interval in Vue using Nuxt.js

As a Vue beginner, I am facing an issue with changing random text every 5 seconds while the page is loading. <template> <section class="container"> <h1 class="title"> Welcome {{ whois }} </h1> </section&g ...

javascriptvue.jsnuxt.js

Decoding Ajax responses and loading JavaScript files

ajaxurl = "fetchData.php" data = {'a':item1,'b':item2,'c':item3,'d':item4,'e':item5,'f':item6} function includeJsFile(jsFileName) { //var head = document.getElementsByTagName('head' ...

javascriptjsonajax

Is there a way I can ensure the values are loaded when the page loads, rather than displaying NaN?

I've recently created a car rental calculator for a client, and it's almost complete. Everything is working smoothly, from the calculations to the conditions. However, I'm facing an issue where the price isn't calculated on page load. I ...

javascriptphphtmljquerynan

Convert a JSON array into a JavaScript array?

Similar Question: How can I extract property values from a JavaScript object into an array? I am receiving a JSON array from a basic server and need to parse it into JavaScript for use in my web application. What is the best way to convert a JSONP ar ...

javascriptjqueryarraysjson

Exploring the foundations of web development with html and stylus

If you have experience with the roots platform, you are familiar with its default stack including jade, stylus, and coffee script. The documentation provides some information on using HTML, CSS, and pure JavaScript instead of the compiled languages, but d ...

javascripthtmlworkflowstylusroots-toolkit

Exploring Express.js: Implementing multithreading and asynchronous techniques for handling simultaneous HTTP requests

Recently, I find myself exploring ways to manage large-scale HTTP requests using Express.js. While I'm aware that Node.js has introduced 'workers' from version 13 onwards for multithreading capabilities, I am curious about how to effectively ...

javascriptmultithreadingexpresshttp

Sorting data in Javascript can be done efficiently by utilizing the .filter method

Can someone help me identify what I might be doing incorrectly? I have a chained filter under computed that is giving me an error message stating 'product.topic.sort' is not a function. My intention is to use 'select' to provide sortin ...

javascriptsortingvue.js

Generating a preview image for a three.js environment

I am currently working on a website dedicated to visualizing the biological neurons found in animals. I have a comprehensive list of neuron names, and I use THREE JS to draw the neuron when the user clicks on its name. However, with hundreds of neurons to ...

javascriptdjangothree.js

Implementing Node.js with browser cache and handling 304 responses

I am currently in the process of creating a single page application with a standard HTML layout as shown below: <html> <head> <title>...</title> <link rel="stylesheet" media="all" type="text/css" href="css/main.css"> ...

javascripthtmlnode.jshttphttp-headers

Sorting Object Values with Alternate Order

Is there a way to sort a JSON response object array in a specific order, especially when dealing with non-English characters like Umlauts? object { item: 1, users: [ {name: "A", age: "23"}, {name: "B", age: "24"}, {name: "Ä", age: "27"} ] ...

javascriptangularjs

Tips for adjusting the maximum characters per line in tinyMCE 5.0.11

I have an angular 8 application that utilizes tinyMCE, and I am looking to limit the maximum number of characters per line in the textArea of tinyMCE. My search for a solution has been unsuccessful so far despite extensive googling efforts. (image link: [ ...

javascriptangulartinymce

Headers can't be set after they have been sent. This issue arises when calling create(data,cb) function

I am a beginner in Node.js and I am attempting to create a model in MongoDB. However, when I make a call to localhost:3000/a, I notice that the request is being sent twice in the console and I am encountering an error stating "Can't set headers after ...

javascriptnode.jsexpressloopbackjs

Using Node.js to serialize JSON POST data as an array

Looking to retrieve POST data from my front-end form. Upon using console.log(req.body), I receive the following output: [ { name: 'name', value: 'kevin' } { name: 'email', value: '' }, { name: 'phone' ...

javascriptjsonnode.jsexpresspost

Steps to implement jQuery after executing the command "npm install jquery"

Greetings! I recently utilized npm install jquery to add jQuery to my project. However, I noticed that it was downloaded into node_modules\jquery along with some unnecessary files. My goal is to only move node_modules\jquery\dist\jquer ...

javascriptjquerynpm

What sets apart the concept of asynchrony in C# from that in JavaScript?

When working with Python and JavaScript, a common issue arises due to blocking the event loop. This occurs when code is executed in a single thread and only one synchronous operation can be performed at a time. Interestingly, this problem does not seem t ...

javascriptc#asynchronousevent-loop

Animate CSS Grid to dynamically fill the viewport on top of current grid elements

Please note that I am specifically seeking vanilla JS solutions, as jQuery is not compatible with this project I have a grid structure that is somewhat complex: body { margin: 0; height: 100vh; text-align: center; } .grid-container { ...

javascripthtmlcsscss-gridanime.js

The jQuery hover function is not functioning properly on page load in Firefox

While this code is functioning smoothly in Chrome and IE, it seems to be encountering issues in Firefox! <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> JS: $(window).load(function(){ $("#bosti ...

javascriptjquerycss