单击按钮时如何运行随机函数？

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.

Answer 1

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>

Answer 2

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;

Answer 3

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.