每次点击可增加数组中的一个索引

Question

I'm just getting hands on JavaScript and I can't figure out how to increment by 1 the index selector with each click.

The following code is giving me the index 6, but I would like this index to increment with each click:

var nextCompanyLabel = 6;

label: label[nextCompanyLabel++],

This is the complete code:

$('#addDataset').click(function() {
  var background = randomColor(0.5);
  var nextCompanyLabel = 6;
  var newDataset = {
    label: label[nextCompanyLabel++],
    borderColor: background,
    backgroundColor: background,
    pointBorderColor: background,
    pointBackgroundColor: background,
    pointBorderWidth: 1,
    fill: false,
    data: [],
  };

  for (var index = 0; index < config.data.labels.length; ++index) {
    newDataset.data.push(randomScalingFactor());
  }

  config.data.datasets.push(newDataset);
  window.myLine.update();
});

All help will be appreciated!

Answer 1

you are reinitialzing nextCompanyLabel to 6 on each click, so incrementation doesn't hold. move the initialization statement outside the event handler function.

var nextCompanyLabel = 6;  //reinitializing nextCompanyLabel, remove this line.
  var newDataset = {
    label: label[nextCompanyLabel++],

Answer 2

You are getting the answer 6 each time because, each time the user clicks, the variable, var nextCompanyLabel is explicitly given the value of 6. ie,

 var nextCompanyLabel = 6; 

Later when you are incrementing it you are using postfix increment, so your value is always 6.

Either declare var nextCompanyLabel = 6; outside the function or make it static.

This should solve your problem.

Answer 3

You could try initializing your nextCompanyLable variable outside the click function like so:

var nextCompanyLabel = 6;
$('#addDataset').click(function() {
  var background = randomColor(0.5);
  var newDataset = {
    label: label[nextCompanyLabel++],
    borderColor: background,
    backgroundColor: background,
    pointBorderColor: background,
    pointBackgroundColor: background,
    pointBorderWidth: 1,
    fill: false,
    data: [],
  };

  for (var index = 0; index < config.data.labels.length; ++index) {
    newDataset.data.push(randomScalingFactor());
  }

  config.data.datasets.push(newDataset);
  window.myLine.update();
});

Answer 4

Assuming your label array to be defined somewhere before in the code, you should initialize the nextCompanyLabel outside the callback function, the updating its value on every click event, in a way such that the index doesn't go out of the array's bounds (for instance using the modulo "%" operator):

 var nextCompanyLabel = 6; $('#addDataset').click(function() { var background = randomColor(0.5); nextCompanyLabel = (nextCompanyLabel + 1) % label.length; var newDataset = { label: label[nextCompanyLabel], borderColor: background, backgroundColor: background, pointBorderColor: background, pointBackgroundColor: background, pointBorderWidth: 1, fill: false, data: [], }; for (var index = 0; index < config.data.labels.length; ++index) { newDataset.data.push(randomScalingFactor()); } config.data.datasets.push(newDataset); window.myLine.update(); });