How to add a conditional to the last element of a loop-CodePudding

I understand the problem I have facing, but I don't know how to go about fixing it. I have 6 input fields whereby, whenever you enter a value in one input field, it goes to the next and then activates the .focus() method.

The issue here is that, after the last input field, there is no more input field which then leads to the error, "Cannot read properties of undefined (reading 'focus')".

I have tried adding several else if's statement to disable the focus after the last input field has been entered but seems its not working and I keep getting the error.

index.html

<div >
  <input type="number"  placeholder="0" min="0" max="9" required>
  <input type="number"  placeholder="0" min="0" max="9" required>
  <input type="number"  placeholder="0" min="0" max="9" required>
  <input type="number"  placeholder="0" min="0" max="9" required>
  <input type="number"  placeholder="0" min="0" max="9" required>
  <input type="number"  placeholder="0" min="0" max="9" required>
</div>

script.js

const codes = document.querySelectorAll(".code");

codes[0].focus();

codes.forEach((code, idx) => {
  code.addEventListener("keydown", (e) => {
    console.log(idx);
    if (e.key >= 0 && e.key <= 9) {
      codes[idx].value = "";
      setTimeout(() => codes[idx   1].focus(), 10);
    } else if (e.key === "Backspace") {
      setTimeout(() => codes[idx - 1].focus(), 10);
    } else if (idx == codes.length - 1) {
      codes[idx].blur();
    }
  });
});

error log

script.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'focus')

CodePudding user response：

That is probably a job for the modulo operator.

Replace idx 1 by (idx 1) % codes.length.

Here is your code changed a little...
To take in account the blur expected for the last input... And to avoid an error on backspace on the first one.

const codes = document.querySelectorAll(".code");

codes[0].focus();

codes.forEach((code, idx) => {
  code.addEventListener("keydown", (e) => {
    console.log(idx);
    if (idx == codes.length - 1) {
      codes[idx].blur();
      return
    }
    
    if (e.key >= 0 && e.key <= 9) {
      codes[idx].value = "";
      setTimeout(() => codes[(idx   1) % codes.length].focus(), 10);
    } else if (e.key === "Backspace" && idx != 0) {
      setTimeout(() => codes[(idx - 1) % codes.length].focus(), 10);
    }
  });
});

<div >
  <input type="number"  placeholder="0" min="0" max="9" required>
  <input type="number"  placeholder="0" min="0" max="9" required>
  <input type="number"  placeholder="0" min="0" max="9" required>
  <input type="number"  placeholder="0" min="0" max="9" required>
  <input type="number"  placeholder="0" min="0" max="9" required>
  <input type="number"  placeholder="0" min="0" max="9" required>
</div>

CodePudding user response：

you definitely should compare the codes.length and compare it with idx to apply the move to the next element except the last one as below

    const codes = document.querySelectorAll(".code");
    codes[0].focus();
    const codexLastIndex = codes.length - 1;

    codes.forEach((code, idx) => {
      code.addEventListener("keydown", (e) => {
        console.log(idx);
        const isLastElement = e.target == codes[codes.length - 1];
        const isFirstElement = e.target == codes[0];

        // special use case for the last element 
        if (isLastElement) {
         if ( e.key >= 0 && e.key <= 9) {
          codes[idx].value = e.key;
         } 
        }
        if ( ( e.key >= 0 && e.key <= 9) && !isLastElement) {
          codes[idx].value = "";
          setTimeout(() => codes[idx   1].focus(), 10);

        } else if (e.key === "Backspace" && !isFirstElement) { // remove the error with the backspace in the first element
          setTimeout(() => codes[idx - 1].focus(), 10);
        } else if (idx == codes.length - 1) {
          codes[idx].blur();
        }
      });
    });

CodePudding user response：

You can try to change codes[idx].blur(); to e.preventDefault You can also see here for more details enter link description here