Random Quote Machine click button not working

Hi guys

So Im having a very frustrating issue and cant get my click function to work. I would appreciate if anyone could have a look and tell me where Im going wrong please.

Thanks

Link to pen:

Hi

And welcome, I had a quick look at your pen. You should probably have a look at how you are referencing your quotes array within your newQuote function. I think you may have got a bit mixed up with array and object referencing.

Hope that helps you debug your code :slight_smile:

1 Like

Hi,
Your code:

function newQuote() {   

let index = Math.floor(Math.random() * (quotes.length));
  
 document.getElementById('text').innerHTML = quotes{quote}.[index];
  document.getElementById('author').innerHTML = quotes{author}.[index];
   document.getElementById('new-quote').addEventListener("click", newQuote());
            
};

There are multiple issues, but you can fix them one by one:

  1. Syntax of your addEventListener() method should be:
    document.addEventListener( event , function )
    As an argument this method takes function (NOT a function call).
    Besides you should move your event listener out of the newQuote function.
  2. Refresh your memory on how to access object properties. You can access object properties in two ways:
    objectName.propertyName
    or
    objectName["propertyName"]
    You can NOT access object properties with curly braces as you do here (quotes{quote})
  3. Think what you need to access first. A quote or an object (quotes{quote}.[index])
1 Like

Thank you for your help so this was the code that passed:

function newQuote() {

let index = Math.floor(Math.random() * (quotes.length));

document.getElementById(“text”).innerHTML = quotes[index].quote;
document.getElementById(“author”).innerHTML = quotes[index].author;

};

document.getElementById(“new-quote”).addEventListener(“click” , newQuote);

1 Like