JS HTML: call random function from array

Question

I’m trying to call a function that I got randomly from an array. Here is the link:https://codepen.io/Dims09/pen/poRrKWP

Right now I have the following code: JS

const areoT = document.getElementById("for");

function getValue() {
  var randoRandit = [na(), na2(), na3(), na4()];
  var rand = randoRandit[Math.floor(Math.random() * randoRandit.length)];
  // alert(rand)
  // document.getElementById("for").innerHTML=rand;
}

HTML

<div id="for"></div>
<button id="J?2e" onclick="getValue()">CF</button>

What Im wondering Is how to call it once gotten random item. I’ve tried eval(), window[](), and even rand() . Can anyone help me?

Modern JS basics: don't use HTML attributes to trigger JS. In your JS, add yourbtnid.addEventListener("click", evt => getValue(evt));, and modern HTML basics: don't put question marks in id attributes. Whatever taught you HTML and Js is a bad tutorial/site/book, and even for your own skill/sanity you want to revisit modern JS and HTML by hitting up some properly modern tutorials (e.g. written in the last year specific to HTML5 and ES6, but ideally ES2020) — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Apr 11, 2021 at 22:46
@Mike'Pomax'Kamermans, I was not taught to do onclick in my HTML for the reason that addEventListener is much better. The reason I don't use addEventListener is stated in my stackoverflow.com/questions/67031124/… post — DIMITRI PORTILLA
– DIMITRI PORTILLA, Commented Apr 12, 2021 at 3:41

Little Santi · Accepted Answer · 2021-04-11 22:49:25Z

2

First, you must take in account that every time you write an identifier followed by a parenthesized list of parameters (even if it is empty), you are calling a function.

So, in this line:

var randoRandit = [na(), na2(), na3(), na4()];

... you are calling four functions and then storing the returned values as items into an array. Is this what you realy want? I guess no.

If you want to reference a function without actually calling it, it is enough to write its name (without parenthesis):

// Declaration:
function myFunction() {...}

// Referenciation:
var f=myFunction;
// Now f acts as a reference to your real function.

// Calling:
f(...)

answered Apr 11, 2021 at 22:49

Little Santi

8,8532 gold badges22 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2021-04-11 22:57:48Z

2

You need to store just the function references (without the ()) in the array then use rand() to call the returned function

function na() {
  console.log('na() called');
  return 'na'
}

function na2() {
  console.log('na2() called');
  return 'na2'
}

function na3() {
  console.log('na3() called');
  return 'na3'
}
// array of the function references
var randoRandit = [na, na2, na3];
var rand = randoRandit[Math.floor(Math.random() * randoRandit.length)];
// now call the function
var result = rand();
document.querySelector('div').textContent = result

<div></div>

edited Apr 11, 2021 at 22:57

answered Apr 11, 2021 at 22:48

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

JS HTML: call random function from array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related