Change "name" attribute of input element using for-loop, array, and eventListener - No jQuery

Question

Okay, so I have the following line of Javascript for which I'm trying to use to change the name attribute of an input element, following a click on a div element seperate from the input element.

Because I wish for the name attribute of the input element to change multiple times following separate clicks, I have attempted a for loop as seen below.

Javascript

document.getElementById('btn').addEventListener("click", function() {
  var letters = ["a", "b", "c", "d", "e"];
  for (var i = 1; i < letters.length; i++) {
    document.getElementById('textinput').name = letters[i];
    }
  });

This code is successful in changing the name attribute of the element with id textinput, however, it automatically changes it to e, and does not cycle through the for loop, despite however many clicks are performed.

I am unsure on the issue and have had difficulty finding a suitible solution here on stackOverflow, so any answers to this issue are deeply appreciated. Thanks in advance!

Brooke Holmes · Accepted Answer · 2018-07-15 10:53:28Z

3

The for loop you have will cycle through entirely each time, meaning that it will always end on e.

Instead, you'll want to increment the letter clicked on each time, and ensure that if it reaches the end of the array, it cycles back around to the start.

var letters = ["a", "b", "c", "d", "e"];
var textInput = document.getElementById("textinput");
var i = 0;

document.getElementById("btn").addEventListener("click", function() { 
  var letter = letters[i];
  textInput.name = letter;
  console.log(letter);
  
  if (++i >= letters.length) i = 0;
});

<div id="btn">Click here!</div>
<input id="textinput">

edited Jul 15, 2018 at 10:53

answered Jul 15, 2018 at 10:30

Brooke Holmes

1,63215 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sachav · Accepted Answer · 2018-07-15 10:25:07Z

3

Your entire for loop will be executed on every click, leaving the name attribute to the last value of your array ("e").

What you need is to increment the offset of your array at every click, something like:

var i = 0;
var letters = ["a", "b", "c", "d", "e"];
document.getElementById('btn').addEventListener("click", function() {
  i++;
  document.getElementById('textinput').name = letters[i];
});

answered Jul 15, 2018 at 10:25

sachav

1,3168 silver badges11 bronze badges

1 Comment

saiyan Over a year ago

This is Ok for some extent. but it will give error on fifth click.

Rick · Accepted Answer · 2018-07-15 11:00:21Z

0

To be more efficient, store your letters array, input element and index outside of the event handler:

var letters = ["a", "b", "c", "d", "e"];
var textinput = document.getElementById("textinput");
var index = 0;

To cycle through each element of the letters array, set the .name property using the value of the current index and increment it:

textinput.name = letters[index++];

To make sure you don't access the index of your array, that is undefined, use some boundary guard:

if (index >= letters.length) {
  index = 0;
}

var letters = ["a", "b", "c", "d", "e"];
var textinput = document.getElementById("textinput");
var index = 0;

document.getElementById("btn").addEventListener("click", function() { 
  textinput.name = letters[index++];    
  
  if (index >= letters.length) {
    index = 0;
  }
  
  console.log(textinput.name);
});

<input id="textinput" type="text"/>
<button id="btn">Click</button>

edited Jul 15, 2018 at 11:00

answered Jul 15, 2018 at 10:33

Rick

4,1349 gold badges29 silver badges38 bronze badges

2 Comments

Brooke Holmes Over a year ago

This is a great answer! Why add jQuery though?

Rick Over a year ago

Thanks @SamHolmes! Must have been a misplaced click in the code editor, corrected now.

Collectives™ on Stack Overflow

Change "name" attribute of input element using for-loop, array, and eventListener - No jQuery

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related