Read one item of array onclick javascript

Question

<div id="wrapper">
    <div class="quotes">
        <p id="par"></p>
    </div>

    <button class="btn" onClick="randomQuote()">button</button>
</div>

function randomQuote () {
    var array = [1,20,50,100];
}

document.getElementById("btn").onclick = randomQuote;
document.getElementById("par").innerHTML = array[0];//then on another btn click array[1]...
for(var i=0; i<array.length;i++){
    quote[i];
}

On "btn" click number 1 from array is shown in "par" paragraph on another btn click number 2 shows up and 1 dissapear, and so on...

is your randomQuotes function copied completely?

Nagaraju
– Nagaraju

2017-01-12 09:45:31 +00:00
Commented Jan 12, 2017 at 9:45 — Nagaraju
– Nagaraju, Commented Jan 12, 2017 at 9:45
Please elaborate more you question

ricky
– ricky

2017-01-12 09:45:31 +00:00
Commented Jan 12, 2017 at 9:45 — ricky
– ricky, Commented Jan 12, 2017 at 9:45

Zakaria Acharki · Accepted Answer · 2017-01-12 12:19:07Z

1

Use counter cpt as index to loop through the array and show the values :

var array = [1,20,50,100];
var cpt = 0;

//Init the 'par' div before click
document.querySelector("#par").innerHTML = array[cpt];

function randomQuote () 
{
  if(cpt<array.length-1)
    cpt++;
  else
    cpt=0;

  document.querySelector("#par").innerHTML = array[cpt];
}

<div id="wrapper">
  <div class="quotes">
    <p id="par"></p>
  </div>

  <button class="btn" onClick="randomQuote()">button</button>
</div>

Minified version could be :

function randomQuote () 
{
    document.querySelector("#par").innerHTML = array[cpt<array.length-1?++cpt:cpt=0];
}

Snippet using Random color as you comment say :

var array = ["Quotes 1","Quotes 2","Quotes 3","Quotes 4"];
var cpt = 0;

//Init the 'par' div before click
document.querySelector("#par").innerHTML = array[cpt];
//Init Random Color before click
getRandomColor();

function randomQuote() 
{
  if(cpt<array.length-1)
    cpt++;
  else
    cpt=0;

  document.querySelector("#par").innerHTML = array[cpt];
}

function getRandomColor() 
{
  document.querySelector("#par").style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
}

<div id="wrapper"> 
  <p id="par"></p> 
  <button id="btn" onClick="randomQuote();getRandomColor()">Next quote</button> 
</div>

edited Jan 12, 2017 at 12:19

answered Jan 12, 2017 at 9:54

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

1 Comment

Zakaria Acharki Over a year ago

Check the new snippet using Random colors

Chinito · Accepted Answer · 2017-01-12 09:50:59Z

0

Is this what you want?

var counter = 0;
function randomQuote () {
   var array = [1,20,50,100];
   document.getElementById("par").innerHTML(array[counter++]);
}

answered Jan 12, 2017 at 9:50

Chinito

1,2251 gold badge10 silver badges11 bronze badges

1 Comment

zoran lazarevic Over a year ago

none of all answers is working what i wanted. It must me because of my insufficient elaboration...i will try to be more specific <div id="wrapper"> <p id="par"></p> <button id="btn" onClick="randomQuote();getRandomColor()">Next quote</button> </div>

BenG · Accepted Answer · 2017-01-12 10:03:04Z

0

save the index, increment it on each click and then reset it when its undefined.

var index = -1;

function randomQuote() {
  var array = [1, 20, 50, 100];
  document.getElementById('par').innerText = (array[++index] || array[index=0]);
}

<div id="wrapper">
  <div class="quotes">
    <p id="par"></p>
  </div>
  <button class="btn" onClick="randomQuote()">button</button>
</div>

answered Jan 12, 2017 at 10:03

BenG

15.2k5 gold badges48 silver badges62 bronze badges

Collectives™ on Stack Overflow

Read one item of array onclick javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related