CODEWITHSUNDEEP
javascriptarrays
Don199
Don199

Reputation: 167

Button click doesn't load first element of array

I am wanting the user to be able to click a button, then move through an array of quotes with each press of the enter key. What I currently have is the button click loading the array into the function and the enter key moving through each element of the array, but the problem is getting the first quote to display on the screen with the initial button click. I am needing the first quote to appear on button click. As it stands, the button click is only setting me up for the functionality to work. Any attempt I have made to correct this has resulted in the function being called with each press of the enter key (which doesn't come close to what I am wanting as an end result). Any suggestions would be greatly appreciated.

const quotes = [0, 1, 2, 3];

function runFunction(v){
  document.body.addEventListener('keydown', function(e){
      if ( e.keyCode == 13 && v.length > 0) {
          let randNum = Math.floor(Math.random() * v.length);
          let num = v[randNum];
          v.splice(randNum, 1);

          e.preventDefault();

          switch (num){
              case 0:
                  document.querySelector('.quote').textContent = "America will never be destroyed from the outside";                                   document.querySelector('.author').innerHTML = 'Abraham Lincoln';
                  break;
              case 1: 
                  document.querySelector('.quote').textContent = 'Imagination is more important than knowledge.';
                  document.querySelector('.author').textContent = 'Albert Einstein';
                  break;
              case 2:
                  document.querySelector('.quote').textContent = "Have no fear of perfection, you'll never reach it."
                  document.querySelector('.author').textContent = 'Salvador Dali';
                  break;
              case 3: 
                  document.querySelector('.quote').textContent = "We don't make mistakes, just happy little accidents.";
                  document.querySelector('.author').textContent = 'Bob Ross';
                  break;
          }
      } 
  });
}
<div class="quote"> Quote </div>
<div class="author"> Author </div>
<button onclick="runFunction(quotes)"> Get Quotes </button>

Upvotes: 0

Views: 164

Answers (1)

0stone0
0stone0

Reputation: 43983

Lets split your code into 2 functions:

  1. onEnter()
    Here we will set the first quote, and add the event listener for enter

  2. setQuote()
    The actual code that will set a new quote, and remove it from the list

Then we change the onClick to our new onEnter function: onclick="onEnter()"

Example:

const quotes = [0, 1, 2, 3];

function onEnter() {

    // Set the first one
    setQuote();
    
    // Now add eventListener for ENTER key
    document.body.addEventListener('keydown', function(event){
      if ( event.keyCode == 13 && quotes.length > 0) {
          setQuote();
      } 
  });
}

function setQuote() {
  let randNum = Math.floor(Math.random() * quotes.length);
  let num = quotes[randNum];
  quotes.splice(randNum, 1);

  switch (num){
      case 0:
          document.querySelector('.quote').textContent = "America will never be destroyed from the outside";
          document.querySelector('.author').innerHTML = 'Abraham Lincoln';
          break;
      case 1: 
          document.querySelector('.quote').textContent = 'Imagination is more important than knowledge.';
          document.querySelector('.author').textContent = 'Albert Einstein';
          break;
      case 2:
          document.querySelector('.quote').textContent = "Have no fear of perfection, you'll never reach it."
          document.querySelector('.author').textContent = 'Salvador Dali';
          break;
      case 3: 
          document.querySelector('.quote').textContent = "We don't make mistakes, just happy little accidents.";
          document.querySelector('.author').textContent = 'Bob Ross';
          break;
    }
}
<div class="quote"> Quote </div>
<div class="author"> Author </div>
<button onclick="onEnter()"> Get Quotes </button>

Upvotes: 1

Related Questions