Same functions, different random results - jQuery

Question

Let's suppose i have an array of words

JS

var fruit = [banana, apple, watermelon, mango];

function loadFruit() {
    var randomFruit = fruit[Math.floor(Math.random() * fruit.length)];
    $('.divLoadFruit').parent('div').html(randomFruit);
};

I need to trigger function on click of the middle word of the sentence, to obtain different random matches

HTML

"You need to eat <a class="divLoadFruit" href='javascript: loadFruit();'>just_some_fruit</a>: it is good for your health."

"My son doesn´t like <a class="divLoadFruit" href='javascript: loadFruit();'>another_fruit_here</a>."

When you click on one of the links, it triggers the same function (obviously) but gets me the same fruit in that spaces. Is there any way to make it random without repeating?

Random without repeating? That's not truly random then. Each time your "randomly" select an item, you have the same odds of of getting the same item again — Kevin Jantzer, Jan 22 '18 at 23:54
Possible duplicate of [Javascript: How to efficiently randomly select array item without repeats](https://stackoverflow.com/questions/17891173/javascript-how-to-efficiently-randomly-select-array-item-without-repeats) — Heretic Monkey, Jan 22 '18 at 23:55
Please fix your HTML: where is the `divLoadFruit` class applied? — Sébastien, Jan 22 '18 at 23:55
the problem is that you use jQuery and `$('.divLoadFruit').parent('div')` targets multiple destinations - you need to rethink, perhaps `loadFruit(this)` to pass in the clicked `` element to the function - it's not clear from your HTML what is targetted by your jQuery either — Jaromanda X, Jan 22 '18 at 23:56

score 1 · Answer 1 · answered Jan 22 '18 at 23:58

Considering you click on the anchor tag and get a random fruit, the following code will work.

var fruit = ['banana', 'apple', 'watermelon', 'mango'];

function loadFruit(id) {
    var randomFruit = fruit[Math.floor(Math.random() * fruit.length)];
document.getElementById(id).innerHTML = randomFruit;
};

You need to eat <a id='just_some_fruit' href='javascript: loadFruit("just_some_fruit");'>just_some_fruit</a>: it is good for your health.

My son doesn´t like <a id='another_fruit_here' href='javascript: loadFruit("another_fruit_here");'>another_fruit_here</a>.

score 0 · Answer 2 · answered Jan 23 '18 at 00:04

This is an approach with jquery.

var fruit = ["banana", "apple", "watermelon", "mango"];

function loadFruit(caller) {
  var randomFruit = fruit[Math.floor(Math.random() * fruit.length)];
  $(caller).html(randomFruit);
};

$('a').click(function() {
  loadFruit(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div>
  "You need to eat <a href='#'>just_some_fruit</a>: it is good for your health." "My son doesn´t like <a href='#'>another_fruit_here</a>."
</div>

Hope it helps!

Same functions, different random results - jQuery

2 Answers2

Linked