将数组增加到最大项目答案

【问题标题】：Increment array up to max items将数组增加到最大项目
【发布时间】：2021-08-29 07:54:12
【问题描述】：

我已经编写了这段代码。它每 1000 毫秒使用 css 转换像卡片翻转一样旋转两个 div，并在 div 中显示新文本，该文本是从数组中绘制的。它无限运行。

但是一旦数组到达末尾，我会得到一个“未定义”值，因为 i++ 在最后一个数组项上递增。我一直在疯狂地试图弄清楚如何防止这种情况。有什么帮助吗？

Codepen：https://codepen.io/warpigs666/pen/OJpBKdy

    <style>
        #flip-card {
            width: 100px;
            height: 50px;
        }
        #flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        #textDiv1 {
            background-color: lightblue;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            text-align: center;
        }
        
        #textDiv2 {
            background-color: lightcoral;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            text-align: center;
            transform: rotateX(180deg);
        }
    </style>

<body>
    
    <div id="flip-card">
        <div id="flip-card-inner">
            <div id="textDiv1">
                one
            </div>
            <div id="textDiv2">
                set via script
            </div>
        </div>
    </div>
   
    <script>
        var flipCard = document.getElementById('flip-card');
        var flipCardInner = document.getElementById('flip-card-inner');
        var textDiv1 = document.getElementById('textDiv1');
        var textDiv2 = document.getElementById('textDiv2');
        var wordArray = ["one", "two", "three", "four", "five"]

        var i = 1;

        function flipText(){   
            textDiv2.innerHTML = wordArray[i];
            flipCardInner.style.transform = "rotateX(180deg)";
            
            setTimeout(
                function() {
                    textDiv1.innerHTML = wordArray[i++];
                    flipCardInner.style.transform = "rotateX(360deg)";
                }, 1000
            );
            
            if (i<wordArray.length){
                i++;
            }
                else {i=0;}
        }
        
            var flipIt = setInterval(flipText, 2000);
        
    </script>
</body>

【问题讨论】：

你真的需要wordArray[i++]吗？这可能是它过度增加的原因。如果您需要访问当前数组元素的 i + 1 成员，请改为使用 wordArray[i + 1]。
我在回答，但后来意识到您的问题需要更多上下文。您能否将您的代码变成可运行的 sn-p 并更清楚地解释所需的行为是什么？
看看我更新答案的最后一部分 - 我想知道这是否是你正在寻找的那种东西 - 无限循环
谢谢，我不确定你对 i+1 的设想，但这根本不起作用，我认为它也可能，但它仍然会引发 undefined 并且还会导致其他问题.我已经更新了我的问题，我会将代码变成可运行的 sn-p。
我添加了一个codepen链接

标签： javascript html css arrays loops

【解决方案1】：

这是setInterval的工作

var flipCard = document.getElementById('flip-card');
let flipCardInner = document.getElementById('flip-card-inner');
let textDiv1 = document.getElementById('textDiv1');
let textDiv2 = document.getElementById('textDiv2');
let wordArray = ["one", "two", "three", "four", "five"];

let i = 0;
let timerVal = 1000;

function getI(i) {
  if (i < wordArray.length - 1) return i + 1;
  else return 0;
}
let ctr = 1,
  useDiv; // ctr and useDiv will help to toggle between divs in our loop and also increment the transform number

textDiv1.innerHTML = wordArray[i]; // initialize 

function flipText() {
  i = getI(i);
  useDiv = (useDiv == textDiv2) ? textDiv1 : textDiv2;
  useDiv.innerHTML = wordArray[i];
  flipCardInner.style.transform = "rotateX(" + (ctr * 180) + "deg)";
  ctr++;
}

let interval
window.onload = function() {
  // we'll still delay the beginning of the infinite loop, but then we set it to an interval, so it runs forever.
  // if you need to stop it in your code, just use clearInterval(interval)
  setTimeout(() => {
    interval = setInterval(() => flipText(), timerVal);
  }, timerVal);
}

#flip-card {
  width: 100px;
  height: 50px;
  perspective: 100px;
}

#flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

#textDiv1 {
  background-color: lightblue;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align: center;
}

#textDiv2 {
  background-color: lightcoral;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align: center;
  transform: rotateX(180deg);
}

<div id="flip-card">
  <div id="flip-card-inner">
    <div id="textDiv1">

    </div>
    <div id="textDiv2">

    </div>
  </div>
</div>

【讨论】：

仍然打印未定义。
谢谢。我从 1 开始，因为 div 已经在 html 代码本身中填充了 0。我尝试了您的代码，但它根本不适合我。它什么也没做。
啊，是的，非常有趣，谢谢！我会检查它。对我来说它从“三”开始，但我想知道为什么会这样......
我将 i 设置为 1，当我将其设置为 0 现在它从“二”开始，但我认为这是由于填充 div 的延迟。我能麻烦你把条件三元运算符写成 if/else 语句吗？我正在尝试，但我不知道为什么它不能用作 if/else 语句。我试过 if(i
@epignosis567 - 不是我的头顶，但通常我必须先进入并玩它。如果您对此提出新问题，请告诉我

【解决方案2】：

我认为这不是这份工作的理想方式，但可能会像这样坚持你的上下文；

var flipCard      = document.getElementById('flip-card'),
    flipCardInner = document.getElementById('flip-card-inner'),
    textDiv1      = document.getElementById('textDiv1'),
    textDiv2      = document.getElementById('textDiv2'),
    wordArray     = ["one", "two", "three", "four", "five"],
    i             = 0;

function flipText(){   
  textDiv2.innerHTML = wordArray[++i % wordArray.length];
  flipCardInner.style.transform = "rotateX(180deg)";
                
  setTimeout(function(){
               textDiv1.innerHTML = wordArray[++i % wordArray.length];
               flipCardInner.style.transform = "rotateX(360deg)";
             }, 1000);
}
            
var flipIt = setInterval(flipText, 2000);

#flip-card { width: 100px;
             height: 50px;
           }
#flip-card-inner { position: relative;
                   width: 100%;
                   height: 100%;
                   transition: transform 0.6s;
                   transform-style: preserve-3d;
                 }
#textDiv1 { background-color: lightblue;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            text-align: center;
          }

#textDiv2 { background-color: lightcoral;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            text-align: center;
            transform: rotateX(180deg);
          }

<div id="flip-card">
  <div id="flip-card-inner">
    <div id="textDiv1">
      one
    </div>
    <div id="textDiv2">
      set via script
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

问题如下，你将 i 增加了两次，而它应该只是一次：

 function() {
                    textDiv1.innerHTML = wordArray[i++]; ==> Here 
                    flipCardInner.style.transform = "rotateX(360deg)";
                }, 1000
            );
            
            if (i<wordArray.length){
                i++;  ==> And here 
            }
                else {i=0;}
        }

删除 wordArray[i++] 上的增量，不应该给你错误。

也让它 i

【讨论】：

现在它会打印 'three'、'four'、'five' 和 'undefined' 两次。
也让它 i
仍然打印“未定义”
谢谢，但这个答案有多个问题。我已经试过了。我很高兴看到这么多人给出错误的答案，我一直在疯狂地试图找出一种简单的方法来编辑我的代码来完成我的要求；）希望有人能够解决问题。
我创建了一半的解决方案，当它打印所有没有未定义的编号但从第二轮开始打印五次时。让我知道你是否想要它