Question

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

这是我正在尝试修复的功能。我想做的就是每当我单击一个按钮（具有nextCar（）的onclick时，我希望它进入数组中的NEXT汽车）现在要做的就是单击我的按钮，它将在元素中说“美洲虎”，但我希望它每次单击按钮时都继续在数组中写入下一个项目。以下是用于透视的代码：

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];

Answer 1

您可以使用阵列的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>

Answer 2

您应该在函数外部声明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>

Answer 3

为您遇到的问题编写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;
}

当我不断单击时，为什么我的for循环不继续？

3 个答案: