Same function with different random results - jQuery part 2

Question

I already posted one similar question but with different issue here Same functions, different random results - jQuery

I have other bigger issue, because I need to load all the content from js array's, and make one of the word inside that array clickable, and obtain random result from another array:

///  simple arrays with link in the middle

var listArray1 = [
  "<a class='linkLoadIam' href='javascript: loadIam();'>I am</a> engulfed",
  "This is how <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> angry",
  "Just some <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> sentimental",
];

var listArray2 = [
  "Phrase without links",
  "Phrase without links2",
  "Phrase without links3",
];

var listArray3 = [
  "Why <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> hungry",
  "This is how <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> eating",
  "Just some <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> food phrase",
];

/////// starting functions
$('#js-random').click(function() {
  // get random array's
  getRandomArray1 = listArray1[Math.floor(Math.random() * listArray1.length)];
  getRandomArray2 = listArray2[Math.floor(Math.random() * listArray2.length)];
  getRandomArray3 = listArray3[Math.floor(Math.random() * listArray3.length)];


  // loading into div
  $('.getRandomArray1div').html(getRandomArray1);
  $('.getRandomArray2div').html(getRandomArray2);
  $('.getRandomArray3div').html(getRandomArray3);

}); //end click function



///array that i want to call randomly with I am link
var listIam = [
  "<a class='linkLoadIam' href='javascript: loadIam();'>I am</a> the substitute",
  "This is how <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> the phrase is changing",
  "Just some <a class='linkLoadIam' href='javascript: loadIam();'>I am</a> random project.",
];


/// function to load this phrase instead of actual phrase

function loadIam() {
  var randomIam = listIam[Math.floor(Math.random() * listIam.length)];
  $('.linkLoadIam').parent('div').html(randomIam);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="results">
  <div class="getRandomArray1div"></div>
  <div class="getRandomArray2div"></div>
  <div class="getRandomArray3div"></div>
</div>

<div id="js-random"> <a href="#">RANDOM</a> </div>

It works perfectly, but functions are repeating the same string, and I want one string in a time when I click on the word.

Can anyone tell me another way? The previous post didn't solved this problem. Thank you

Don't pick a random string each time. Shuffle the arrays at the beginning, then select items sequentially from the arrays when the user clicks. — Barmar, Jan 23 '18 at 13:23

score 0 · Answer 1 · answered Jan 23 '18 at 13:38

First of all, I would suggest to change the jquery version to at least 1.7, so you'll be able to take advantage of event delegation https://learn.jquery.com/events/event-delegation/

Replace the loadIam function with:

$('#results').bind('click', '.linkLoadIam', function() {
  var randomIam = listIam[Math.floor(Math.random() * listIam.length)];
  $(this).closest('div').html(randomIam);
});

Also, replace all occurrences of "javascript: loadIam();" with "#", like:

var listArray1 = [
  "<a class='linkLoadIam' href='#'>I am</a> engulfed",
  "This is how <a class='linkLoadIam' href='#'>I am</a> angry",
   "Just some <a class='linkLoadIam' href='#'>I am</a> sentimental",
];

var listArray3 = [
  "Why <a class='linkLoadIam' href='#'>I am</a> hungry",
  "This is how <a class='linkLoadIam' href='#'>I am</a> eating",
   "Just some <a class='linkLoadIam' href='#'>I am</a> food phrase",
];

var listIam = [
  "<a class='linkLoadIam' href='#'>I am</a> the substitute",
  "This is how <a class='linkLoadIam' href='#'>I am</a> the phrase is changing",
  "Just some <a class='linkLoadIam' href='#'>I am</a> random project.",
];

Same function with different random results - jQuery part 2

1 Answers1