The cursor is not moving from one input to the next by pressing an Enter button in JavaScript-CodePudding

I want the cursor to move from one input to the next only when the enter button is pressed. And when it reaches the last input, I want it to move it to the first input again (like a loop). The problem is with this JavaScript code. I have generated it using OpenAI Playground.

Is adding event listeners to buttons necessary in this case? If so, how to call this code in input fields?

var inputs = document.querySelectorAll("input");

inputs.forEach(input => {
    input.addEventListener('keyup', function(e) {
        if (e.keyCode === 13) {
            var nextInput = inputs[inputs.indexOf(e.target)   1];
            if (nextInput) {
                nextInput.focus();
            }
        }
    })
});

The complete html is here:

<!DOCTYPE html>
<html>
<head>
<title>
Inserting meaning
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#one
{
    margin-left:auto;
    margin-right:auto;
    width:90%;

}
</style>
</head>
<body>
<script>
    var inputs = document.querySelectorAll("input");

    inputs.forEach(input => {
        input.addEventListener('keyup', function(e) {
            if (e.keyCode === 13) {
                var nextInput = inputs[inputs.indexOf(e.target)   1];
                if (nextInput) {
                    nextInput.focus();
                }
            }
        })
    });
</script>
<div align ="center">
<h1>
Meaning In Sentence
</h1>
<div>
<h3>
Sentence:
</h3>
<input type="text" id="sentence"  style="width:80%"  placeholder="Enter the sentence">

</div>

<br>
<h3>
Difficult Word:
</h3>
<input type="text" id="word"  style="width:80%"  placeholder="Enter the difficult word">
<br>
<h3>
Meaning:
</h3>
<input type="text" id="meaning"  style="width:80%"  onchange="func()" placeholder="Enter the meaning">
<br>

</div>
<br>
<div  align = "center" id="modifiedsentence" onchange="func()">
<div>

<script>
    function func()
    {
        
        var s=document.getElementById("sentence").value.replace(/['"] /g, '');
        var w=document.getElementById("word").value;
        var m=document.getElementById("meaning").value;
        s=s[0].toUpperCase() s.slice(1);
        var f=s.replace(w,w " (" m ") ") "<br>" 
        document.getElementById("modifiedsentence").innerHTML;
        document.getElementById("modifiedsentence").innerHTML = f.toString();
        document.getElementById("sentence").value = " ";
        document.getElementById("word").value = " ";
        document.getElementById("meaning").value = " ";
       mvCursor();
        // console.log(f);
    }

    </script>

</div>
</body>
</html>

CodePudding user response：

Adding to bee zero's answer above:

You can check for the last input element and when return key is pressed reaches the last input element, you can focus to in zeroth index.

const nextinputIndex = index < (inputs.length - 1) ? (index 1) : 0;

Test snippet:

<html>
   <head>
      <title>
         Inserting meaning
      </title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style>
         #one
         {
         margin-left:auto;
         margin-right:auto;
         width:90%;
         }
      </style>
   </head>
   <body>
      
      <div align ="center">
         <h1>
            Meaning In Sentence
         </h1>
         <div>
            <h3>
               Sentence:
            </h3>
            <input type="text" id="sentence"  style="width:80%"  placeholder="Enter the sentence">
         </div>
         <br>
         <h3>
            Difficult Word:
         </h3>
         <input type="text" id="word"  style="width:80%"  placeholder="Enter the difficult word">
         <br>
         <h3>
            Meaning:
         </h3>
         <input type="text" id="meaning"  style="width:80%"  onchange="func()" placeholder="Enter the meaning">
         <br>
      </div>
      <br>
      <div  align = "center" id="modifiedsentence" onchange="func()">
      <div>
         
      </div>
      <script>
        function func()
        {

            var s=document.getElementById("sentence").value.replace(/['"] /g, '');
            var w=document.getElementById("word").value;
            var m=document.getElementById("meaning").value;
            s=s[0].toUpperCase() s.slice(1);
            var f=s.replace(w,w " (" m ") ") "<br>" 
            document.getElementById("modifiedsentence").innerHTML;
            document.getElementById("modifiedsentence").innerHTML = f.toString();
            document.getElementById("sentence").value = " ";
            document.getElementById("word").value = " ";
            document.getElementById("meaning").value = " ";
           // mvCursor(); REMOVING AS THIS IS NOT DEFINED
            // console.log(f);
        }
        var inputs = document.querySelectorAll("input");
        inputs.forEach((input, index) => {
          input.addEventListener('keyup', function(e) {
              if (e.keyCode === 13) {
                  const nextinputIndex = index < (inputs.length - 1) ? (index   1) : 0;
                  var nextInput = inputs[nextinputIndex];
                  if (nextInput) {
                      nextInput.focus();
                  }
              }
          })
      });
     </script>
   </body>
</html>

CodePudding user response：

You can use the index param in forEach to grasp the index.

      inputs.forEach((input, index) => { // HERE grab the index
          input.addEventListener('keyup', function(e) {
              if (e.keyCode === 13) {
                  var nextInput = inputs[index   1];  // // HERE use the index
                  if (nextInput) {
                      nextInput.focus();
                  }
              }
          })
      });

Complete snippet to test:

<html>
   <head>
      <title>
         Inserting meaning
      </title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style>
         #one
         {
         margin-left:auto;
         margin-right:auto;
         width:90%;
         }
      </style>
   </head>
   <body>
      
      <div align ="center">
         <h1>
            Meaning In Sentence
         </h1>
         <div>
            <h3>
               Sentence:
            </h3>
            <input type="text" id="sentence"  style="width:80%"  placeholder="Enter the sentence">
         </div>
         <br>
         <h3>
            Difficult Word:
         </h3>
         <input type="text" id="word"  style="width:80%"  placeholder="Enter the difficult word">
         <br>
         <h3>
            Meaning:
         </h3>
         <input type="text" id="meaning"  style="width:80%"  onchange="func()" placeholder="Enter the meaning">
         <br>
      </div>
      <br>
      <div  align = "center" id="modifiedsentence" onchange="func()">
      <div>
         
      </div>
      <script>
        function func()
        {

            var s=document.getElementById("sentence").value.replace(/['"] /g, '');
            var w=document.getElementById("word").value;
            var m=document.getElementById("meaning").value;
            s=s[0].toUpperCase() s.slice(1);
            var f=s.replace(w,w " (" m ") ") "<br>" 
            document.getElementById("modifiedsentence").innerHTML;
            document.getElementById("modifiedsentence").innerHTML = f.toString();
            document.getElementById("sentence").value = " ";
            document.getElementById("word").value = " ";
            document.getElementById("meaning").value = " ";
           // mvCursor(); REMOVING AS THIS IS NOT DEFINED
            // console.log(f);
        }
        var inputs = document.querySelectorAll("input");
        inputs.forEach((input, index) => {
          input.addEventListener('keyup', function(e) {
              if (e.keyCode === 13) {
                  var nextInput = inputs[index   1];
                  if (nextInput) {
                      nextInput.focus();
                  }
              }
          })
      });
     </script>
   </body>
</html>

CodePudding user response：

Probably need to make a little loop to find the next input.

var nextInput = e.target.nextElementSibling;
var found = false;
while (nextInput) {
    if (nextInput.classList.contains("form-control")) {
        found = true;
        break;
    }
    nextInput = nextInput.nextElementSibling
}