Revising variables in Java Script

Question

Revising variables in Java Script

How can I shuffle a list of variables in JS and maintain the order while changing their values? The following code snippet demonstrates what I am trying to achieve.

<p id="demo"></p>

<script>
var gen = "male ";
var race = "white";
var rel = "christian";

var chars =[gen,race,rel];
chars = shuffle(chars); 

document.getElementById("demo").innerHTML = chars+"";

/*prints for example "white christian male" which is what I want

/*lets say I want to change the gender, and maintain the newly shuffled order (race-rel-gen in this case)*/ 

/* The below doesn't work. I want it to print "white christian female", but it just reprints the original string*/

gen = "female ";

document.getElementById("demo").innerHTML = chars+"";
</script>

javascript arrays list variables

Answer 1

Answer №1

If you wish to preserve the original order of your array, consider using an object instead of a string to maintain reference. Here is an example:

/* This function converts an array of objects into a formatted string */
const arrToString = (arr) => arr.map((obj) => obj.value).join(' ')

var gender = { value: "male" }
var race = { value: "white" }
var religion = { value: "christian" }

var characters =[gender, race, religion]
characters = shuffle(characters); 

// Output will be something like: "white christian male"
document.getElementById("demo").innerHTML = arrToString(characters);

// Changing the value of the 'value' key in the object
gender.value = "female"

// Output will now be: "white christian female"    
document.getElementById("demo").innerHTML = arrToString(characters);

Answer 2

If you wish to preserve the original order of your array, consider using an object instead of a string to maintain reference. Here is an example:

/* This function converts an array of objects into a formatted string */
const arrToString = (arr) => arr.map((obj) => obj.value).join(' ')

var gender = { value: "male" }
var race = { value: "white" }
var religion = { value: "christian" }

var characters =[gender, race, religion]
characters = shuffle(characters); 

// Output will be something like: "white christian male"
document.getElementById("demo").innerHTML = arrToString(characters);

// Changing the value of the 'value' key in the object
gender.value = "female"

// Output will now be: "white christian female"    
document.getElementById("demo").innerHTML = arrToString(characters);

Answer 3

Answer №2

If you want to manipulate data using a map, along with custom functions, here's how you can do it.

let character = new Map([
  ['gen', 'male'],
  ['race', 'white'],
  ['rel', 'christian'],
  ["order", shuffle([0,1,2])],
  ["display", ['gen', 'race', 'rel']]
]);

function shuffle(array) {
  return array.sort(_ => Math.random() > .5);
}

function display(mapItem) {
return mapItem.get("order").map(item => mapItem.get(mapItem.get("display")[item])); 
}

//display character
document.querySelector("#demo").innerHTML += "</br>" + display(character);

//change race
character.set("race", "blue");
document.querySelector("#demo").innerHTML += "</br>" + display(character);

// reshuffle order
character.set("order", shuffle(character.get("order")));
document.querySelector("#demo").innerHTML += "</br>" + display(character);

<p id="demo"></p>

Answer 4

If you want to manipulate data using a map, along with custom functions, here's how you can do it.

let character = new Map([
  ['gen', 'male'],
  ['race', 'white'],
  ['rel', 'christian'],
  ["order", shuffle([0,1,2])],
  ["display", ['gen', 'race', 'rel']]
]);

function shuffle(array) {
  return array.sort(_ => Math.random() > .5);
}

function display(mapItem) {
return mapItem.get("order").map(item => mapItem.get(mapItem.get("display")[item])); 
}

//display character
document.querySelector("#demo").innerHTML += "</br>" + display(character);

//change race
character.set("race", "blue");
document.querySelector("#demo").innerHTML += "</br>" + display(character);

// reshuffle order
character.set("order", shuffle(character.get("order")));
document.querySelector("#demo").innerHTML += "</br>" + display(character);

<p id="demo"></p>

Answer 5

Answer №3

It seems like the solution provided below should do the trick. By keeping the `person` object and the `order` array separate, you gain more versatility. I've opted to use Lodash for the `shuffle` function for added convenience.

Check out the CodePen Demo here

this.person = {
 gen: "male",
 race: "white",
 rel: "christian"
};

this.order = ["gen", "race", "rel"];

function display() {
  let temp = [];
  this.order.forEach((key) => {
    temp.push(this.person[key]);
  });
  document.getElementById("demo").innerHTML += temp.join(", ") + "<br>";
}

// shuffle the order of properties
_.shuffle(this.order);

// output initial data
display();

// make changes while retaining property order
this.person["gen"] = "female";
display();

this.person["race"] = "black";
display();

this.person["rel"] = "jewish";
display();

Answer 6

It seems like the solution provided below should do the trick. By keeping the `person` object and the `order` array separate, you gain more versatility. I've opted to use Lodash for the `shuffle` function for added convenience.

Check out the CodePen Demo here

this.person = {
 gen: "male",
 race: "white",
 rel: "christian"
};

this.order = ["gen", "race", "rel"];

function display() {
  let temp = [];
  this.order.forEach((key) => {
    temp.push(this.person[key]);
  });
  document.getElementById("demo").innerHTML += temp.join(", ") + "<br>";
}

// shuffle the order of properties
_.shuffle(this.order);

// output initial data
display();

// make changes while retaining property order
this.person["gen"] = "female";
display();

this.person["race"] = "black";
display();

this.person["rel"] = "jewish";
display();

Answer 7

Answer №4

To update the array with a new variable value, you can follow this approach:

var gen = "male "
var race = "white "
var rel = "christian "

var chars =[gen,race,rel]
chars = shuffle(chars); 

document.getElementById("demo").innerHTML = chars+"";


gen = "female "
var chars =[gen,race,rel]
chars = shuffle(chars); 
document.getElementById("demo").innerHTML = chars+"";

You can view the code in action here: https://jsfiddle.net/AndrewL64/p6rgo01a/

Another way is to create a function for reusability:

function newVal(gen, race, rel) {
    var chars =[gen,race,rel]
    chars = shuffle(chars);
    document.getElementById("demo").innerHTML = chars+"";
}

newVal('male ','white ', 'christian ');

newVal('female','white ', 'christian ');

Check out the updated code snippet on jsFiddle: https://jsfiddle.net/AndrewL64/p6rgo01a/1/

Answer 8

To update the array with a new variable value, you can follow this approach:

var gen = "male "
var race = "white "
var rel = "christian "

var chars =[gen,race,rel]
chars = shuffle(chars); 

document.getElementById("demo").innerHTML = chars+"";


gen = "female "
var chars =[gen,race,rel]
chars = shuffle(chars); 
document.getElementById("demo").innerHTML = chars+"";

You can view the code in action here: https://jsfiddle.net/AndrewL64/p6rgo01a/

Another way is to create a function for reusability:

function newVal(gen, race, rel) {
    var chars =[gen,race,rel]
    chars = shuffle(chars);
    document.getElementById("demo").innerHTML = chars+"";
}

newVal('male ','white ', 'christian ');

newVal('female','white ', 'christian ');

Check out the updated code snippet on jsFiddle: https://jsfiddle.net/AndrewL64/p6rgo01a/1/

Answer 9

Answer №5

Perhaps you've phrased your question incorrectly, or maybe your original intentions weren't fully conveyed in your inquiry. However, based on my understanding, it seems like you're searching for something along these lines:

var races = ["caucasian", "ethiopian", "malayan", "american", "mongolian"];
var beliefs = ["jewish", "buddhist", "muslim", "christian", "shintoist"];
var genders = ["male", "female"];

var randomArrayElement = function(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function makeCombo(r, b, g) {
  var race = randomArrayElement(r);
  var belief = randomArrayElement(b);
  var gender = randomArrayElement(g);
  return [race, belief, gender].join(" ");
}

document.querySelector("button").addEventListener("click", function(e){
  document.getElementById("profile-area").innerText = makeCombo(races, beliefs, genders);
})

<p id='profile-area'></p>
<button>Generate a profile</button>

Answer 10

Perhaps you've phrased your question incorrectly, or maybe your original intentions weren't fully conveyed in your inquiry. However, based on my understanding, it seems like you're searching for something along these lines:

var races = ["caucasian", "ethiopian", "malayan", "american", "mongolian"];
var beliefs = ["jewish", "buddhist", "muslim", "christian", "shintoist"];
var genders = ["male", "female"];

var randomArrayElement = function(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function makeCombo(r, b, g) {
  var race = randomArrayElement(r);
  var belief = randomArrayElement(b);
  var gender = randomArrayElement(g);
  return [race, belief, gender].join(" ");
}

document.querySelector("button").addEventListener("click", function(e){
  document.getElementById("profile-area").innerText = makeCombo(races, beliefs, genders);
})

<p id='profile-area'></p>
<button>Generate a profile</button>

Answer 11

Answer №6

It is important to create a shuffle function in your code. Here is an example implementation:

// Implement the shuffle function
function shuffleArray(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

Once you have defined this function, you can use it with an array of characters like so:

var characters = ["gen", "race", "rel"];

You can then display the shuffled array as a string by replacing the commas with spaces:

document.getElementById("demo").innerHTML = shuffleArray(characters).join(" ");

The join(" ") method is used to replace the comma with a space in the output.

Option 1) Reshuffle with new value(s)

If you want to change values in the shuffled array, you can do so by directly updating the elements:

characters[0] = "female";

To update the displayed content on the webpage, simply call the shuffle function again.

Option 2) Keep the shuffled order and output it with updated value

If you wish to maintain the shuffled order while updating values, store the shuffled array in a separate variable:

var characters = ["gen", "race", "rel"];
var shuffledCharacters = shuffleArray(characters);

document.getElementById("demo").innerHTML = shuffledCharacters;

// Update the value of 'gen'
shuffledCharacters[shuffledCharacters.indexOf("male")] = "female";

// Display the updated array
document.getElementById("demo").innerHTML = shuffledCharacters;

Answer 12

It is important to create a shuffle function in your code. Here is an example implementation:

// Implement the shuffle function
function shuffleArray(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

Once you have defined this function, you can use it with an array of characters like so:

var characters = ["gen", "race", "rel"];

You can then display the shuffled array as a string by replacing the commas with spaces:

document.getElementById("demo").innerHTML = shuffleArray(characters).join(" ");

The join(" ") method is used to replace the comma with a space in the output.

Option 1) Reshuffle with new value(s)

If you want to change values in the shuffled array, you can do so by directly updating the elements:

characters[0] = "female";

To update the displayed content on the webpage, simply call the shuffle function again.

Option 2) Keep the shuffled order and output it with updated value

If you wish to maintain the shuffled order while updating values, store the shuffled array in a separate variable:

var characters = ["gen", "race", "rel"];
var shuffledCharacters = shuffleArray(characters);

document.getElementById("demo").innerHTML = shuffledCharacters;

// Update the value of 'gen'
shuffledCharacters[shuffledCharacters.indexOf("male")] = "female";

// Display the updated array
document.getElementById("demo").innerHTML = shuffledCharacters;

Revising variables in Java Script

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Creating a Dynamic Tree View Component in AngularJS Using JSON Data

Creating dynamic input fields from an array in PHP

Exploring the process of sending various variables from PHP to a jQuery function

`Where can I find instructions on splitting an item into a byte[]?`

Switch your attention to the following input text using AngularJS

Iterate through each row asynchronously, waiting for each one to complete before moving on to the

Adjusting the position of the parent div by manipulating the bottom property

The checkbox filter in Angular 6 has the ability to replace the previously selected

When populating data, two ID fields (_id and id) are generated as duplicates

Tips for automatically closing SweetAlert after an AJAX request finishes

Leveraging HTTP/2 in conjunction with angularJS

Eliminate duplicate items using the reduce method in JavaScript

Form an object using elements of a string array

Sequencing numerous promises (managing callbacks)

Refresh the content of a webpage in AngularJS without the need to fully reload the entire page

Exploring the World of React JS by Diving into Backend Data

Vue is unable to capture Cordova events

Having challenges retrieving information from MySQL in AngularJS

Trouble arises when incorporating a new feature onto a map with OpenLayers and Vue.js

New feature in jQuery inputmask enables placeholder text to be retained