Using JS loops to send unique vars from HTML buttons to function

Question

Beginner here. I have a loop that creates 26 buttons with unique ID's and values. What I'm struggling with is figuring out the proper way to send the button's ID to a function so that I can store unique vars for each button independently without creating more than one function. I currently have an array with the 26 items I need for my buttons and the following loop:

function makeButtons() {
for (var i = 0; i < 26; i++) {
    document.getElementById("whereButtonsGo").innerHTML += "<input type = 'button' value = '" + items[i] + "' id = 'button" + items[i] + "' onclick = doThing(button" + items[i] + ")'>";  
} 
}

I want the argument in the onclick function to be sent to a function such as:

function doThing(id) {
document.getElementById("'" + id.value + "'").style.color = "pink"; 
}

But so far I haven't been able to get this to work. Any help would be greatly appreciated!

Side note: using developer.mozilla.org/en-US/docs/Web/API/Document/createElement and developer.mozilla.org/en-US/docs/Web/API/Node/appendChild will give you far more flexibility and create more readable code than setting innerHTML. — Dave
– Dave, Commented Jun 7, 2018 at 17:17

Erick Lanford Xenes · Accepted Answer · 2018-06-08 00:01:53Z

1

Maybe this is what you are looking for:

makeButtons();

function makeButtons() {
	for (var i = 0; i < 26; i++) {
		document.getElementById("whereButtonsGo").innerHTML += "<input type = 'button' value = '" + i + "' onclick = doThing(this)>";
	}
}

function doThing(currentButton) {
    currentButton.style.color = "pink"; 
}

<div id="whereButtonsGo"/>

Try to keep the IDs as simple as possible

edited Jun 8, 2018 at 0:01

answered Jun 7, 2018 at 17:04

Erick Lanford Xenes

1,5822 gold badges23 silver badges37 bronze badges

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

2 Comments

Erick Lanford Xenes Over a year ago

Yes, youre right, I just wanted you to take the idea ;)

Itai Yasur Over a year ago

Sorry, didn't see that you'd used (this) here. Deleted my post to make this my answer pick. Thanks!

Dave · Accepted Answer · 2018-06-07 17:31:24Z

1

I recommend against using innerHTML for creating elements that you actually want to do something. Even if it works, your code will be amazingly unclear. Instead, write code that demonstrates that you're actually creating and adding elements:

var items = [1,2,3,4,5,6];

function makeButtons() { 
  var container = document.getElementById("whereButtonsGo");
  for (var i = 0; i < items.length; i++) {
    var button = document.createElement("button");
    button.type = 'button';
    button.value = items[i];
    button.innerText = items[i];
    button.id = 'button'+items[i];
    button.onclick = doThing;
    container.append(button)
  }
}

function doThing() {
  console.log('click of ' + this.id);
}

makeButtons();

Note that you don't need to pass the id in the function call for the event - the button that was clicked will be available as this.

Here is a fiddle.

answered Jun 7, 2018 at 17:31

Dave

4,4223 gold badges26 silver badges30 bronze badges

1 Comment

Itai Yasur Over a year ago

Thanks for all the info, I did not know there was an alternative to innerHTML but I've always wanted one.

Collectives™ on Stack Overflow

Using JS loops to send unique vars from HTML buttons to function

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related