JS HTML: call random function from array

JavaScript
1

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

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 show to call ?() once gotten random item.
I’ve tried eval(), window[](), and even rand() .
Can anyone help me?

2

In yours, the array randoRandit is a collection of values, not functions. So amend to:

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

If I’m understanding you correctly

3

Thank you @DanCouper ,

I’m trying to make a list of functions so I can call one function to work onclick, not making a set of values to make it. I was trying to do it solely with functions. Is there a way to call the function instead of changing to a value?

4

Well that’s what my change does: you have an array of functions, you pick a random one, then you call it (the commented out code is it being called)

5

@DanCouper ,

I’ve tested out your code and it comes out as undefined. Am I doing something wrong?

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

@dportilla0001 , If you want to call the function then the values inside the “randoRandit” array must be the function or I missed something.

7

do your functions have a return statement?

8

Well what are na, na2, na3, na4?

9

@Rishabh786Singh , @ILM , @DanCouper ,

I am very sorry, I originally posted the wrong link:
https://codepen.io/Dims09/pen/poRrKWP

@Rishabh786Singh,

Thank you for your comment. I now have posted the link containing the function. For a quick giveaway:

function na() {
// document.getElementById('open-modal').addEventListener('click', showModal);

// another event to click and close the modal.
document.getElementById('close-modal').addEventListener('click', hideModal);

// One function to show the modal
function showModal(){
  // Grab the element class modal and show it by adding the style.
  var modal = document.querySelector('.my-Modal');
  modal.classList.add('show');
}

// Second function to close the modal.
function hideModal(){
  // grab the element class modal and hide it by removing the style.
  var modal = document.querySelector('.my-Modal');
  modal.classList.remove('show');
}
}

function na2() {
// add an event listener on the click button 
// document.getElementById('open-modal').addEventListener('click', showModal2);

// another event to click and close the modal.
document.getElementById('close-modal2').addEventListener('click', hideModal2);

// One function to show the modal
function showModal2(){
  // Grab the element class modal and show it by adding the style.
  var modal = document.querySelector('.my-Modal2');
  modal.classList.add('show');
}

// Second function to close the modal.
function hideModal2(){
  // grab the element class modal and hide it by removing the style.
  var modal = document.querySelector('.my-Modal2');
  modal.classList.remove('show');
}
}

function na3() {
// document.getElementById('open-modal').addEventListener('click', showModal2);
	
// another event to click and close the modal.
document.getElementById('close-modal3').addEventListener('click', hideModal);

// One function to show the modal
function showModal(){
  // Grab the element class modal and show it by adding the style.
  var modal = document.querySelector('.my-Modal3');
  modal.classList.add('show');
}

// Second function to close the modal.
function hideModal(){
  // grab the element class modal and hide it by removing the style.
  var modal = document.querySelector('.my-Modal3');
  modal.classList.remove('show');
}
}

function na4() {
// add an event listener on the click button 
// document.getElementById('open-modal').addEventListener('click', showModal2);

// another event to click and close the modal.
document.getElementById('close-modal4').addEventListener('click', hideModal2);

// One function to show the modal
function showModal2(){
  // Grab the element class modal and show it by adding the style.
  var modal = document.querySelector('.my-Modal4');
  modal.classList.add('show');
}

// Second function to close the modal.
function hideModal2(){
  // grab the element class modal and hide it by removing the style.
  var modal = document.querySelector('.my-Modal4');
  modal.classList.remove('show');
}
}

@ILM,
They don’t indeed. I will try adding a return statement.

@DanCouper ,
I have given the code above explaining the functions; I will update when i change them.

Thanks

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.