Почему мой цикл for не продолжается, когда я продолжаю нажимать? - PullRequest
Новая
       22

Почему мой цикл for не продолжается, когда я продолжаю нажимать?

0 голосов
/ 14 января 2019 
function nextCar() {
  var i;
  for(i=0; i<4; i++){
    var x = document.getElementById("boxright");
     x.innerHTML = cars[i].brand ;
  }
}

Это функция, которую я пытаюсь исправить. То, что я хочу, это чтобы каждый раз, когда я нажимал кнопку (на которой щелкает nextCar (), я хочу, чтобы она переходила к следующей машине в моем массиве. скажите «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];

Ответы [ 3 ]

0 голосов
/ 14 января 2019

Вы должны объявить переменную 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>
0 голосов
/ 14 января 2019

Правильный способ написания кода 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;
}
0 голосов
/ 14 января 2019

Вы можете использовать массив итератор и получить следующий бренд.

Для отображения всех других брендов необходимо сохранить прежние значения. 

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>
...