为什么当我继续点击时我的 for 循环不继续？答案

【问题标题】：Why doesn't my for loop continue when I keep clicking?为什么当我继续点击时我的 for 循环不继续？
【发布时间】：2019-06-08 05:48:57
【问题描述】：

function nextCar() {
  var i;
  for(i=0; i<4; i++){
    var x = document.getElementById("boxright");
     x.innerHTML = cars[i].brand ;
  }
}

这是我试图修复的功能。我想要它做的是，每当我单击一个按钮（具有 nextCar() 的 onclick 时，我希望它转到我的数组中的下一辆汽车。它现在在做什么，是我将单击我的按钮，它会在元素中说“jaguar”，但我希望它在每次单击按钮时继续写入数组中的下一个项目。这是顶部的代码：

function car(brand, color, tire, window){
    this.brand = brand;
    this.color = color;
    this.tire = tire;
    this.window = window;
}
var Jaguar = new car("jaguar", "black", "m13", "tinted");
var Porsche = new car("Porsche", "red", "h3h3", "rollable");
var Fiat = new car("Fiat", "purple", "gauge", "clear");
var Bentley = new car("Bentley", "white", "twenties", "electric");
var cars = [Jaguar, Porsche, Fiat, Bentley];

【问题讨论】：

函数缺少右花括号？
要只打印下一辆车，还需要在函数前声明 i=0，去掉 for 循环并在关闭函数前将 i 加一。
你根本不需要 for 循环

标签： javascript loops for-loop break

【解决方案1】：

为您遇到的问题编写 JavaScript 代码的正确方法如下所示：

HTML：

<body>
    <h2>Testing:</h2>
    <input type="button" value="Next Car" onclick="nextCar()" >
    <div id="my-div">
        <p id="output"></p>
    </div>
    <script src="test.js"></script>
</body>

test.js:

function Car(brand, color, tire, window){
    this.brand = brand;
    this.color = color;
    this.tire = tire;
    this.window = window;
}

let Jaguar = new Car("Jaguar", "black", "m13", "tinted");
let Porsche = new Car("Porsche", "red", "h3h3", "rollable");
let Fiat = new Car("Fiat", "purple", "gauge", "clear");
let Bentley = new Car("Bentley", "white", "twenties", "electric");
let cars = [Jaguar, Porsche, Fiat, Bentley];

var i = 0;

function nextCar() {
    if (i == cars.length) {
        console.log("That was the last car!");
        return;
    }
    let output = document.getElementById("output");
    output.innerHTML = cars[i++].brand;
}

【讨论】：

【解决方案2】：

您可以使用数组的iterator 并获得下一个品牌。

为了显示所有其他品牌，您需要保留以前的值。

function Car(brand, color, tire, window) { // use upper case names for instanciable functions
    this.brand = brand;
    this.color = color;
    this.tire = tire;
    this.window = window;
}

function nextCar() {
    var x = document.getElementById("boxright"),
        item = iterator.next();

    if (!item.done) {
        x.innerHTML += item.value.brand + ' ';
    }
}

var jaguar = new Car("Jaguar", "black", "m13", "tinted"),
    porsche = new Car("Porsche", "red", "h3h3", "rollable"),
    fiat = new Car("Fiat", "purple", "gauge", "clear"),
    bentley = new Car("Bentley", "white", "twenties", "electric"),
    cars = [jaguar, porsche, fiat, bentley],
    iterator = cars[Symbol.iterator]();

<button onclick="nextCar()">Click</button>
<p id="boxright"></p>

【讨论】：

谢谢 Nina，但这样做是为了让数组中的所有 4 个项目都显示出来，而不是每次单击按钮时都单独显示。
我认为每次单击按钮时他都需要将汽车数组迭代到下一个项目。

【解决方案3】：

您应该在函数外部声明i 变量。

此外，您可以放置一个可选条件，该条件将重新迭代您给定的汽车数组。

i = 0;
function nextCar() {
  var x = document.getElementById("boxright");
  x.innerHTML = cars[i].brand ;
  i++;
  if(i == cars.length)
    i = 0;
}

function car(brand, color, tire, window){
  this.brand = brand;
  this.color = color;
  this.tire = tire;
  this.window = window;
}

var Jaguar = new car("jaguar", "black", "m13", "tinted");
var Porsche = new car("Porsche", "red", "h3h3", "rollable");
var Fiat = new car("Fiat", "purple", "gauge", "clear");
var Bentley = new car("Bentley", "white", "twenties", "electric");
var cars = [Jaguar, Porsche, Fiat, Bentley];
i = 0;
function nextCar() {
  var x = document.getElementById("boxright");
  x.innerHTML = cars[i].brand ;
  i++;
  if(i == cars.length)
    i = 0;
}

<button onclick = "nextCar()">Click</button>
<p id="boxright"></p>

【讨论】：

@Sareda，不客气。不要忘记接受答案以帮助他人。