时间戳

首页 > 解决方案 > 使用按钮分别遍历arraylist和显示元素

javascript - 使用按钮分别遍历arraylist和显示元素

问题描述

我想遍历这个数组。

const array = ['item1', 'item2', 'item3', 'item4', 'item5'];

并在 div 中默认显示第一个项目，并使用按钮在同一个 div 中显示下一个项目（也替换旧项目）我确实尝试过，但它没有用

const quizConainer = document.getElementById('quiz');
const next = document.getElementById('next');

    const array = [
      '<h1>item1</h1>',
      '<h1>item2</h1>',
      '<h1>item3</h1>',
      '<h1>item4</h1>',
      '<h1>item5</h1>',
    ];

    quizConainer.innerHTML = array[0];

    function nextItem() {
      for (let i = 0; i < array.length; i++) {
        if (quizConainer.innerHTML === array[i]) {
          quizConainer.innerHTML = array[i++];
        }
      }
    }

    next.addEventListener('click', nextItem);

这就是html

 <div id=""></div>
 <button id="next">Next</button>

标签： javascripthtml

解决方案

声明一个全局变量。这可以帮助你而不是循环。编辑：添加了 jsfiddle

<div id="quiz"></div>
<button id="next">Next</button>
<script>
    const quizConainer = document.getElementById('quiz');
const next = document.getElementById('next');
    let i = 1;
    const array = [
    '<h1>item1</h1>',
    '<h1>item2</h1>',
    '<h1>item3</h1>',
    '<h1>item4</h1>',
    '<h1>item5</h1>',
    ];

    quizConainer.innerHTML = array[0];

    function nextItem() {
        i = i % array.length;   //If you want it reset and start from first on traversing the entire array
        console.log(i);
        quizConainer.innerHTML = array[i];
        i = i +1;
    }

    next.addEventListener('click', nextItem);
</script>

推荐阅读