Get one element from JS array, in any click

Question

I have a constuctor function and a button. I want to get a name of one client in each click. but when I click one time, I get the name of all the clients in a sequence.

function Client(Name, Feedback) {
  this.clientName = Name;
  this.clientFeedback = Feedback;
}
let clients = [
  new Client('Jo', 'hi'),
  new Client('Mark', 'bye'),
]
let btnRight = document.getElementById('btnRight');
btnRight.addEventListener('click', () => {
  for (let Client of clients) {


    console.log(`${Client.clientName} says ${Client.clientFeedback}!`)
  }
})

<button class="btn" id="btnRight">button</button>

I'm absolute beginner, so any feedback will help me

Happy coding as you learn!

T.J. Crowder
– T.J. Crowder

2020-07-29 09:57:22 +00:00
Commented Jul 29, 2020 at 9:57 — T.J. Crowder
– T.J. Crowder, Commented Jul 29, 2020 at 9:57

T.J. Crowder · Accepted Answer · 2020-07-29 09:57:16Z

2

Don't loop in your event handler. Instead, keep track of where you are in the array outside the handler, for instance (see *** comments):

function Client(Name, Feedback){
    this.clientName = Name;
    this.clientFeedback = Feedback;
}
let clients = [
    new Client('Jo', 'Hi' ),
    new Client('Mark', 'Bye'),
];
let index = 0; // The next client to show
let btnRight = document.getElementById('btnRight');
btnRight.addEventListener('click', () => {
    // *** Get this client
    const client = clients[index];
    // *** Set up the next click (looping around back to the start if necessary)
    index = (index + 1) % clients.length;
    // *** Show result
    alert(`${client.clientName} says ${client.clientFeedback}!`)
});

<button class="btn" id="btnRight">button</button>

If you don't want to loop back to the beginning, keep a reference to the event handler and remove it when you run out of clients (or similar).

Some side notes:

I suggest learning the rules for where semicolons go and then consistently including them (my preference) or leaving them out (relying on automatic semicolon insertion), but not mixing the two. :-) My guess is that you just left some out accidentally — and fair enough, you're new!
I strongly, strongly recommend not putting the closing } at the end of the last statement in a block. It's hard to read (subjective) and hard to maintain (objective; you have to muck about if you need to add another statement). Use any of the standard styles, all of which put the closing } on its own line after the block.
I suggest not using initially-capped variables (client in your for (const Client of clients)) for things other than constructor functions (and type names, in TypeScript), at least not in code you'll be working on with other people or asking for help with, etc. The overwhelming convention is to start a variable with a lower case letter when it's not referring to a constructor function.
Finally, consistent indentation is useful for when you're reading code. I'm a strongly believer in four-space (or one tab) indentation, but two spaces is (sadly) very common. Whatever you choose, consistency is the key thing.

edited Jul 29, 2020 at 9:57

answered Jul 29, 2020 at 9:51

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

5 Comments

glinda93 Over a year ago

Nice tips. What I hate about four-space indentation is that you will get run out of your space pretty fast, especially in JSX

T.J. Crowder Over a year ago

@bravemaster - For me that's a feature. :-) It means that I need to break things up more.

glinda93 Over a year ago

Could be. Have you written any blog or post related to your preference? I'd love to see that :)

T.J. Crowder Over a year ago

@bravemaster - I haven't, but I've been thinking about it. (I have recently started blogging again after having taken a long break while writing the book.) I've also heard an accessibility argument for using tabs (!) and letting each developer pick their preferred width. (Not all developers have good vision.) I did that for the first, oh, it had to be at least 10 years of my career and was happy with it. Primary problem is tools deciding to use a hardcoded width of eight spaces. for them. :-|

glinda93 Over a year ago

I have very poor eyesight but I'm perfectly fine with 2 space indentation. Thanks for sharing blog link, I will check them regularly. Looking forward to discussing indentation preference again. Thanks.

Vasanth Gopal · Accepted Answer · 2020-07-29 09:52:07Z

1

Suggest removing the foreach inside the click function. And add a variable to track the count of clicks.

function Client(Name, Feedback){
    this.clientName = Name;
    this.clientFeedback = Feedback;
}
let clients = [
new Client('Jo', 'Hi' ),
new Client('Mark', 'Bye'),
]
let btnRight = document.getElementById('btnRight');
let clickIndex = 0;
btnRight.addEventListener('click', () => {
   alert(`${clients[clickIndex].clientName} says ${clients[clickIndex].clientFeedback}!`)
   clickIndex += 1;
   if(clickIndex > clients.length - 1)
     clickIndex = 0; 
})

answered Jul 29, 2020 at 9:52

Vasanth Gopal

1,28510 silver badges11 bronze badges

Comments

MaximilianK · Accepted Answer · 2020-07-29 09:53:09Z

1

function Client(Name, Feedback) {
  this.clientName = Name;
  this.clientFeedback = Feedback;
}
let clients = [
  new Client('Jo', 'Hi'),
  new Client('Mark', 'Bye'),
]
let currentIndex=0
let btnRight = document.getElementById('btnRight');
btnRight.addEventListener('click', () => {
  alert(`${clients[currentIndex].clientName} says ${clients[currentIndex].clientFeedback}!`)
  currentIndex++
  if(currentIndex >= clients.length){
     currentIndex=0;
  }
})

<button class="btn" id="btnRight">button</button>

answered Jul 29, 2020 at 9:53

MaximilianK

631 silver badge3 bronze badges

Comments

glinda93 · Accepted Answer · 2020-07-29 10:01:36Z

1

All of the above answers are correct, yet here is another solution using javascript yield:

function Client(Name, Feedback) {
  this.clientName = Name;
  this.clientFeedback = Feedback;
}
let clients = [
  new Client('Jo', 'Hi'),
  new Client('Mark', 'Bye'),
]
let btnRight = document.getElementById('btnRight');

function* yieldClient(index = 0) {
  while(true) {
    yield(clients[index]);
    index = (index + 1) % 2;
  }
}

const clientIterator = yieldClient();

btnRight.addEventListener('click', () => {
  const Client = clientIterator.next().value;
  console.log(`${Client.clientName} says ${Client.clientFeedback}!`)
})

<button class="btn" id="btnRight">button</button>

answered Jul 29, 2020 at 10:01

glinda93

8,5297 gold badges51 silver badges88 bronze badges

Collectives™ on Stack Overflow

Get one element from JS array, in any click

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related