Variable value does not get updated when return-ed-CodePudding

I can't figure out why an integer isn't being updated. I have added event listeners to specific classes and once I hover over them the index should get updated.

That is not the case. Console log keeps on repeating that Old index: 0, New index is 1. Once I hover the next element it repeats that the Old index is 0 and the New index is 1 (value of index does not get updated).

Any help would be much appreciated. Thank you

var index = 0;
var indexArray = ["1", "2", "3"];

function addListeners() {
  let eListeners = document.querySelectorAll(".eListener");
  for (let i = 0; i < eListeners.length; i  ) {
    eListeners[i].addEventListener("mouseover", function() {
      indexPlus(index)
    });
  }
}

function indexPlus(index) {
  if (index == 2) {
    console.log("Old index: "   index);
    index = 0;
    console.log("New index: "   index);
    return index;
  } else {
    console.log("Old index: "   index);
    index = index   1;
    console.log("New index: "   index);
    return index;
  }
}

addListeners();

<span class="eListener">Some text1</span>
<span class="eListener">Some text2</span>
<span class="eListener">Some text3</span>
<span class="eListener">Some text4</span>
<span class="eListener">Some text5</span>
<span class="eListener">Some text6</span>

CodePudding user response：

In the indexPlus function use a different name for your parameter, not index as it's already globally defined

var index = 0;
var indexArray = [];

function addListeners() {
  let eListeners = document.querySelectorAll(".eListener");
  for (let i = 0; i < eListeners.length; i  ) {
    //indexArray[i] = 0;
    eListeners[i].addEventListener("mouseover", function() {
      indexPlus(index)
    });
  }
}

function indexPlus(ind) {
  if (ind == 2) {
    console.log("Old index: "   index);
    index = 0;
    console.log("New index: "   index);
  } else {
    console.log("Old index: "   index);
    index = index   1;
    console.log("New index: "   index);
  }
}

addListeners();

<span class="eListener">Some text1</span>
<span class="eListener">Some text2</span>
<span class="eListener">Some text3</span>
<span class="eListener">Some text4</span>
<span class="eListener">Some text5</span>
<span class="eListener">Some text6</span>

CodePudding user response：

You are modifying the indexPlus function parameter index, not your global index variable.

To achieve that, you need to assign the return value of indexPlus to index inside your listeners. To make that more clear I've renamed the function parameter to idx.

Last things: I've shortened your check inside the ìndexPlus` function:

Instead of checking for 2 and then resetting to 0, and otherwise incrementing, you can make use of the remainder operator %:

idx =   idx % 3;

That is a matter of how comfortable you feel with that. There's nothing wrong with your checks staying the way you implemented them.

I've also refactored your index-based loop to a for...of loop which is preferred because it improves readability.

let index = 0;
let eListeners = document.querySelectorAll(".eListener");

function addListeners() {
  for (const eListener of eListeners) {
    eListener.addEventListener("mouseover", function() {
      index = indexPlus(index)
    });
  }
}

function indexPlus(idx) {
  console.log("Old index: "   idx);
  idx =   idx % 3;
  console.log("New index: "   idx);
  return idx;
}

addListeners();

<span class="eListener">Some text1</span>
<span class="eListener">Some text2</span>
<span class="eListener">Some text3</span>
<span class="eListener">Some text4</span>
<span class="eListener">Some text5</span>
<span class="eListener">Some text6</span>