How can I run a random function when a button is clicked?

Question

I have a popup window when clicked should display a random person's info out of 40 possible outcome. I tried using the switch statement:

$("#ball").click(function){

var n = Math.floor(Math.random()*2);

switch(n) {
    case 0:
    function(){
        document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
        document.getElementById("popupInfo").innerHTML = '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
    }
    break;

    case 1:
    function(){
        document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
        document.getElementById("popupInfo").innerHTML = '<h1>TWO</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
    }
    break;

    case 2:
    function(){
        document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
        document.getElementById("popupInfo").innerHTML = '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
    }
    break;

But it doesn't seem to work.

I tried jQuery, with different functions assigned to different variables, but not sure how to call a random one when the button is clicked.

    var gacha1 = function(){
        $(".gachaPopup .avatar").html("<img src='images/catalog/22Josephine.png' alt='' />");
        $(".artistinfo .boxed").html('<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>');
    }

var gacha2 = function(){
        $(".gachaPopup .avatar").html("<img src='images/catalog/21Emily.png' alt='' />");
        $(".artistinfo .boxed").html('<h1>Emily</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>');
    }

var gacha3 = function(){
        $(".gachaPopup .avatar").html("<img src='images/catalog/20Erica.png' alt='' />");
        $(".artistinfo .boxed").html('<h1>Erica</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>');
    }

$("#ball").click(gacha2);

Any help appreciated, thank you so much.

The first one works if you remove all the `function(){` statements, you do not want to define nested functions, you just want to run their code. The second one works if you put all the `gacha` into an array and access it by random index which then is basically the same as a switch case. — luk2302, Jun 22 '21 at 05:59
I think you are not actually calling the function you are defining it — , Jun 22 '21 at 06:02
check the browser *developer* tools console - you'll see why "it doesn't seem to work" — Jaromanda X, Jun 22 '21 at 06:03
A quick search turns up many examples here on SO that should help, many using exactly the approaches you've tried: https://stackoverflow.com/questions/42430401/how-to-call-a-random-function-one-time-in-javascript, https://stackoverflow.com/questions/9791853/select-random-function, https://stackoverflow.com/questions/28655966/call-random-function-javascript-but-not-twice-the-same-function ... — Don't Panic, Jun 22 '21 at 09:44

score 1 · Answer 1 · answered Jun 23 '21 at 01:20

You're not calling those functions, you're just defining them. You would want to use what's called an immediately invoked function execution or IIFE. Basically it means you would wrap your functions in parenthesis so that it executes as soon as it's defined.

(function(){
  document.getElementById("popupAvatar").innerHTML = '<img src="images/catalog/22Josephine.png" alt="" />';
  document.getElementById("popupInfo").innerHTML = '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
})();

But I wouldn't really recommend doing that, as your code is going to get pretty long and be full of redundancies. Instead, you can build an array of objects to logically hold your data and then randomly select an index from that.

let popups = [
  {
    avatar: '<img src="images/catalog/22Josephine.png" alt="" />',
    info: '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>'
  },
  {
    avatar: '<img src="images/catalog/TWO.png" alt="" />',
    info: '<h1>TWO</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>'
  },
  {
    avatar: '<img src="images/catalog/Bob.png" alt="" />',
    info: '<h1>Bob</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>'
  }
];

let random = Math.floor(Math.random() * (popups.length + 1));

document.getElementById("popupAvatar").innerHTML = popups[random].avatar;
document.getElementById("popupInfo").innerHTML = popups[random].info;

I'm assuming that you're actual code isn't as redundant as your example, but if it is you could actually extract anything that repeats from your data so that you only have to write it once.

let popups = [
  {
    avatar: '22Josephine',
    info: 'Josephine'
  },
  {
    avatar: 'TWO',
    info: 'Two'
  },
  {
    avatar: 'BOB',
    info: 'Bob'
  }
];

let random = Math.floor(Math.random() * (popups.length + 1));

document.getElementById("popupAvatar").innerHTML = `<img src="images/catalog/${popups[random].avatar}" alt="" />`;
document.getElementById("popupInfo").innerHTML = `<h1>${popups[random].info}</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>`;

The backticks `` are template literals, they make concatenating strings and variables much cleaner.

score 0 · Answer 2 · answered Jun 22 '21 at 06:10

There are efficient ways to do this. Rather than making a switch case and increasing your lines of code, a better approach would be to have an array of values you want to replace and access using the value from your random function.

function randomName() {

  let names = ["Josephine", "TWO", "Josephine"];
  let num = Math.floor(Math.random() * 2);

  document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
  document.getElementById("popupInfo").innerHTML = `<h1>${names[num]}</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>`;
  
  console.log(num);
}

<button onclick="randomName()">Click Here</button>
<div id="popupAvatar"></div>
<div id="popupInfo"></div>

score 0 · Answer 3 · answered Jun 22 '21 at 06:12

Try this

    switch(n) {
        case 0:
            document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
            document.getElementById("popupInfo").innerHTML = '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
            break;
        case 1:
            document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
            document.getElementById("popupInfo").innerHTML = '<h1>TWO</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
            break;
        case 2:
            document.getElementById("popupAvatar").innerHTML = "<img src='images/catalog/22Josephine.png' alt='' />";
            document.getElementById("popupInfo").innerHTML = '<h1>Josephine</h1><h2>"Decisions cultivate experience."</h2><a href="#">Go To Profile</a>';
            break;

If you want you should define the function first somewhere then call it in switch statements

    switch(n) {
        case 0:
            func_1();
            break;
        case 1:
            func_2();
            break;
        case 2:
            func_3();
            break;

How can I run a random function when a button is clicked?

3 Answers3