mardi 23 janvier 2018

Same function with different random results - jquery part 2

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




Aucun commentaire:

Enregistrer un commentaire