Can I put a switch in a function even if there's already a listener on it?

Question

I'm trying to get the proper syntax to that the random number being generated will switch with each click on the submit button.

So far I have my switch outside of my function, and as expected the result does not change as it is not connected to the submit button.

I'm curious if and how I can properly put these two together. My current code is:

const randomNumber = Math.floor(Math.random() * 8);

// Eightball

let eightBall = '';

// Statement Phrases

switch (randomNumber) {
  case 0:
    eightBall = 'Is it certain';
    break;
  case 1:
    eightBall = 'Is it decidedly so';
    break;
  case 2:
    eightBall = 'Reply hazy try again';
    break;
  case 3:
    eightBall = 'Cannot predict now';
    break;
  case 4:
    eightBall = 'Do not count on it';
    break;
  case 5:
    eightBall = 'My sources say no';
    break;
  case 6:
    eightBall = 'Outlook not so good';
    break;
  case 7:
    eightBall = 'Signs point to yes';
    break;
  default:
    eightBall = 'Invalid input.';
    break;
}

// Add Event Listener

let jerForm = document.querySelector('.jerForm');

console.log(jerForm);

jerForm.addEventListener('submit', jerResult);

// Eightball response

function jerResult(e) {
  e.preventDefault();
  let result = document.querySelector('.jerresult');
  result.innerText = eightBall;
}

I want to make it so that each time the button is clicked, another number is generated, and thus another answer will display, instead of setting the result in the beginning for the whole page. This is because I'm going to add more of these later and want each of them to be able to display different results and refresh after button is clicked again.

I'm very curious to know if these can be put into a function all together or how the proper syntax for it would be.

Thanks in advance for helping me.

Answer 1

Just wrap the code that generates the random string in a function and return the string at the bottom of the function:

function getRandomEightBallString() {

    const randomNumber = Math.floor(Math.random() * 8);

    let eightBall = '';

    switch (randomNumber) {
      case 0:
        eightBall = 'Is it certain';
        break;
      case 1:
        eightBall = 'Is it decidedly so';
        break;
      case 2:
        eightBall = 'Reply hazy try again';
        break;
      case 3:
        eightBall = 'Cannot predict now';
        break;
      case 4:
        eightBall = 'Do not count on it';
        break;
      case 5:
        eightBall = 'My sources say no';
        break;
      case 6:
        eightBall = 'Outlook not so good';
        break;
      case 7:
        eightBall = 'Signs point to yes';
        break;
      default:
        eightBall = 'Invalid input.';
        break;
    }

    // return the resulting string
    return eightBall;
}

Then use it in the event listener like so:

function jerResult(e) {
    e.preventDefault();
    let result = document.querySelector('.jerresult');

    // call getRandomEightBallString and assign its return value to the element's innerText
    result.innerText = getRandomEightBallString();
}

That way each time you call getRandomEightBallString , a new randomNumber is picked and a different string is returned. Your switch statement is now reusable .

Answer 2

Is this is you are looking at?

let jerForm = document.querySelector('.jerForm');
let eightBall = '';

jerForm.addEventListener('submit', jerResult);


function jerResult(e) {
  e.preventDefault();
  let result = document.querySelector('.jerresult');
   const randomNumber = Math.floor(Math.random() * 8);
 switch (randomNumber) {
  case 0:
    eightBall = 'Is it certain';
    break;
  case 1:
    eightBall = 'Is it decidedly so';
    break;
  case 2:
    eightBall = 'Reply hazy try again';
    break;
  case 3:
    eightBall = 'Cannot predict now';
    break;
  case 4:
    eightBall = 'Do not count on it';
    break;
  case 5:
    eightBall = 'My sources say no';
    break;
  case 6:
    eightBall = 'Outlook not so good';
    break;
  case 7:
    eightBall = 'Signs point to yes';
    break;
  default:
    eightBall = 'Invalid input.';
    break;
}
  result.innerText = eightBall;

}

Thanks!!