javascript function to generate random trivias via array not working on my HTML-CodePudding

I am currently watching a tutorial in learning javascript for reference: https://www.youtube.com/watch?v=PhKQFUJuArs

i copied everything that he did but still can't make it work

when i click the button nothing happens :< i am a newbie and is trying to learn so tips are also welcome

var oddtrivia =[]
oddtrivia[0] = "84% of a raw apple is water.";
oddtrivia[1] = "A cucumber is 96% water.";
oddtrivia[2] = "A pineapple is a berry.";
oddtrivia[3] = "Advertisements for coffee in London in 1657 claimed that the beverage was a cure for scurvy, gout and other ills.";
oddtrivia[4] = "Americans eat more bananas than any other fruit: a total of 11 billion a year.";
oddtrivia[5] = "Avocados have the highest calories of any fruit at 167 calories per hundred grams.";
oddtrivia[6] = "Bananas are actually herbs. Bananas die after fruiting, like all herbs do.";
oddtrivia[7] = "Eggplant is a member of the thistle family.";
oddtrivia[8] = "Oak trees do not have acorns until they are fifty years old or older.";
oddtrivia[9] = "One pound of tea can make 300 cups of the beverage.";

function oddTrivia() {
    var randomTrivia = Math.floor(Math.random()*(oddtrivia.length));
    document.getElementById('ptrivia').innerHTML = oddtrivia[randomTrivia];
}

   <!DOCTYPE html>
   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   </head>
   <body>
        <div id="button">
        <button onlcick="oddTrivia()"> Click for Trivias </button>
        </div>
        <p id="ptrivia"></p>

    <!-- script -->
    <script src="randomizertrivia.js"></script>

   </body>
   </html>

CodePudding user response：

You just misspelled onclick as onlcick in your <button> element.

var oddtrivia =[]
oddtrivia[0] = "84% of a raw apple is water.";
oddtrivia[1] = "A cucumber is 96% water.";
oddtrivia[2] = "A pineapple is a berry.";
oddtrivia[3] = "Advertisements for coffee in London in 1657 claimed that the beverage was a cure for scurvy, gout and other ills.";
oddtrivia[4] = "Americans eat more bananas than any other fruit: a total of 11 billion a year.";
oddtrivia[5] = "Avocados have the highest calories of any fruit at 167 calories per hundred grams.";
oddtrivia[6] = "Bananas are actually herbs. Bananas die after fruiting, like all herbs do.";
oddtrivia[7] = "Eggplant is a member of the thistle family.";
oddtrivia[8] = "Oak trees do not have acorns until they are fifty years old or older.";
oddtrivia[9] = "One pound of tea can make 300 cups of the beverage.";

function oddTrivia() {
    var randomTrivia = Math.floor(Math.random()*(oddtrivia.length));
    document.getElementById('ptrivia').innerHTML = oddtrivia[randomTrivia];
}

<!DOCTYPE html>
   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   </head>
   <body>
        <div id="button">
        <button onclick="oddTrivia()"> Click for Trivias </button>
        </div>
        <p id="ptrivia"></p>

    <!-- script -->
    <script src="randomizertrivia.js"></script>

   </body>
   </html>

CodePudding user response：

On your HTML document you made a mispelling mistake tag button change to onclick next time use the console by right clicking on your browser and you will see the line of error.