javascript - 读取数组 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];
}

在“btn”上点击数组中的数字 1 显示在“par”段落中 在另一个 btn 上，单击数字 2 显示，1 消失，依此类推...

Answer 1

使用计数器cpt作为索引来循环数组并显示值:

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>

缩小版本可能是:

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

使用您评论中的随机颜色的片段:

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>