Bdtjtk

I need this function to run on a variable amount of divs and return a unique result for each div.

class Sentence {

    constructor(na, num, col) {

        this.name = na;

        this.number = num;

        this.color = col;

    }



    makesentence() {

        $('div').html(this.name + " is " + this.number + " years old and loves " + this.color);

    }

}







var names = ['zach', 'kelly', 'lisa', 'slater'],

    name = names[Math.floor(Math.random() * names.length)],

    colors = ['red', 'orange', 'blue', 'magenta'],

    color = colors[Math.floor(Math.random() * colors.length)],

    number = Math.floor((Math.random() * 95) + 1);







var newsentence = new Sentence(name, number, color);

newsentence.makesentence();

So, if my HTML is 3 empty divs:

<div></div>

<div></div>

<div></div>

I would like it to return something like:

lisa is 67 years old and loves red

zach is 56 years old and loves magenta

kelly is 27 years old and loves orange

But now it just returns something like:

lisa is 67 years old and loves red

lisa is 67 years old and loves red

lisa is 67 years old and loves red

If I understand your question correctly, then this can be achieved quite easily by reogranising your code around the iteration over <div> elements in your document.

As a stratergy to gurantee unique results for each div, you could shuffle your input data like so:

 names = names.sort(function() { return Math.random() - 0.5; });

 colors = colors.sort(function() { return Math.random() - 0.5; });

 ages = ages.sort(function() { return Math.random() - 0.5; });

And then iterate over each <div>, populating the contents of each sequentially via each element's index in this way:

$('div').each(function(index) {



  var name = names[index];

  var color = colors[index];

  var number = ages[index];



  $(this).html(name + " is " + number + " years old and loves " + color);

});

The idea here is to first shuffle your input data (ie to achieve the randomised result) followed by ordered access to that data when generating your sentences, which ensures uniqueness between sentenses in the final result.

Here's a working snippet showing the two ideas in action:

// Declare input data to be used for sentense generation. 

// Also declare age data array

var names = ['zach', 'kelly', 'lisa', 'slater'];

var colors = ['red', 'orange', 'blue', 'magenta'];

var ages = new Array(100).fill(0).map((value, index) => index + 1);



// Shuffle the input data to yield a randomized result

names = names.sort(function() { return Math.random() - 0.5; });

colors = colors.sort(function() { return Math.random() - 0.5; });

ages = ages.sort(function() { return Math.random() - 0.5; });



// Iterate over each div in the document

$('div').each(function(index) {

  

  // Get data from each array by current div's index

  var name = names[index];

  var color = colors[index];

  var number = ages[index];

  

  // For the current div, update the html content as before

  $(this).html(name + " is " + number + " years old and loves " + color);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div></div>

<div></div>

<div></div>

I am wondering why the answers have to be so complicated when a simple each loop thru each div would do the work just fine.

$.each($(".div"), function(){

  var names = ['zach', 'kelly', 'lisa', 'slater'],

  name = names[Math.floor(Math.random() * names.length)],

  colors = ['red', 'orange', 'blue', 'magenta'],

  color = colors[Math.floor(Math.random() * colors.length)],

  number = Math.floor((Math.random() * 95) + 1);



  var newsentence = new Sentence(name, number, color);



  $(this).html(newsentence.makesentence());

});

You can add a condition if you want the result to be even more unique as you mentioned.