How to get random array element onclick of a button in Javascript

Question

I have a java script array with large number of elements inside it, on click of a button I want to display the any random array element on screen, for which I have used Math.random function, but not sure why it is not working. here is my code below.

<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <button id="getquotes" value="Quotes" onclick="Loadquotes();">Quotes</button>
    <p id="quoteshere" ></p>
    <script>
      var Loadquotes= function(){
        var quotes = new Array('Stack1','Stack2','Stack16','Stack17','Stack13','Stack14','Stack15','Stack6','Stack7','Stack8','Stack9','Stack10');
        var i;

        for (i=0;i<quotes.length;i++){
          var newquotes = quotes[Math.floor(Math.random() * quotes.length)];
          document.getElementById('quoteshere').value=newquotes;
        }
      };
    </script>
  </body>
</html>

quotes.length will be one more than the total number of items. Maybe try quotes.length - 1? - Also, .value isn't a valid property of a paragraph element, and even if it was, the for loop would just override the value multiple times. — evolutionxbox
– evolutionxbox, Commented Feb 2, 2017 at 10:03

Zakaria Acharki · Accepted Answer · 2017-02-02 10:12:37Z

2

quoteshere is P Tag value function won't work use innerText or innerHTML instead please find below snippet

var Loadquotes= function(){
  debugger;
  var quotes = new Array('Stack1','Stack2','Stack16','Stack17','Stack13','Stack14','Stack15','Stack6','Stack7','Stack8','Stack9','Stack10');
  var i;

  for (i=0;i<quotes.length;i++){
    var newquotes = quotes[Math.floor(Math.random() * quotes.length)];
    document.getElementById('quoteshere').innerText = newquotes;
  }
};

<button id="getquotes" value="Quotes" onclick="Loadquotes();">Quotes</button>
<p id="quoteshere" ></p>

edited Feb 2, 2017 at 10:12

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

answered Feb 2, 2017 at 10:07

Curiousdev

5,7983 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

arunkumar talla · Accepted Answer · 2017-02-02 10:14:32Z

1

you can try this

var quotes = Array('Stack1','Stack2','Stack16','Stack17','Stack13','Stack14','Stack15','Stack6','Stack7','Stack8','Stack9','Stack10');
var Loadquotes= function(){
    var newquotes = quotes[Math.floor(Math.random() * quotes.length)];
    document.getElementById('quoteshere').innerHTML=newquotes;
};

<button id="getquotes" value="Quotes" onclick="Loadquotes();">Quotes</button>
<p id="quoteshere" ></p>

answered Feb 2, 2017 at 10:14

arunkumar talla

1579 bronze badges

Comments

Dhirendra · Accepted Answer · 2017-02-02 10:47:58Z

0

Try This

<html>
<head>
    <title>Demo</title>
</head>
        <body>
                <button id="getquotes" value="Quotes" onclick="Loadquotes()"> Quotes </button>
                    <p id="quoteshere" ></p>
                        <script>
                function Loadquotes(){
                var quotes = new Array('Stack1','Stack2','Stack16','Stack17','Stack13','Stack14','Stack15','Stack6','Stack7','Stack8','Stack9','Stack10');
                var newquotes = Math.floor(Math.random() * quotes.length);
                document.getElementById('quoteshere').innerHTML = quotes[newquotes];

                 }
                        </script>
        </body>

edited Feb 2, 2017 at 10:47

answered Feb 2, 2017 at 10:32

Dhirendra

3093 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to get random array element onclick of a button in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related