JavaScript onclick: Change Text on Button Click by Index

Use the forEach index parameter in JavaScript to capture each button’s position in your choices collection, then set an onclick handler that updates the .mainInfo h2 and p text from your arr array. This maps the clicked button directly to the right aboutUs object without needing data-index attributes or complex lookups—perfect for your five static buttons. Here’s the fixed code: Array.from(choices).forEach((element, index) => { element.onclick = () => { title.textContent = arr[index].title; paragraph.textContent = arr[index].paragraph; }; });.

Contents

• The Problem with Your Current Code
• Recommended Fix: forEach with Index
• Alternative: Data Attributes for Explicit Mapping
• Scalable Option: Event Delegation
• Best Practices and Performance
• Sources
• Conclusion

The Problem with Your Current Code

You’ve got five buttons in a choices collection, an array of aboutUs objects, and you want a clean JavaScript onclick swap for the title and paragraph in .mainInfo. No toggling classes—just pure text updates. But arr[element] fails because element is a DOM node, not a number. Frustrating, right?

The loop runs fine, but inside the handler, element refers to the specific button clicked (thanks to closure), yet you can’t index an array with a <button> element. Console.log proves it: you’re seeing the node, not 0 through 4. Common snag for anyone diving into onclick event handling.

Your aboutUs class is solid—nice touch with the constructor. We just need to link buttons to array indices reliably. Three solid patterns fix this: a simple forEach tweak (best for small static sets like yours), data attributes for semantic clarity, or event delegation if buttons might grow dynamically.

Recommended Fix: forEach with Index

For your setup—five fixed buttons—this is the cleanest. Leverage forEach’s second parameter, index, to “bake in” the array position during loop time. The onclick closure captures it perfectly.

Replace your loop with this:

Array.from(choices).forEach((element, index) => {
 element.onclick = () => {
 title.textContent = arr[index].title;
 paragraph.textContent = arr[index].paragraph;
 };
});

Click the first button? Boom—history text appears. Second? goals. No indexOf lookups at runtime, which keeps it snappy. This pattern shines in MDN’s Array.forEach docs, where the callback gets (element, index, array)—index is free real estate.

Why not element.indexOf or similar? Those recompute position every click, slower for bigger lists. Here, it’s captured once. Test it: buttons respond instantly, console forgotten.

And yeah, textContent beats innerHTML unless you need HTML parsing—safer against injections.

Alternative: Data Attributes for Explicit Mapping

Prefer buttons to scream their purpose? Slap a data-index on each in HTML. Semantic, self-documenting, and works even if you shuffle the array later.

Update your HTML like:

<button class="choices" data-index="0">History</button>
<button class="choices" data-index="1">Goals</button>
<!-- etc. up to data-index="4" -->

Then the handler:

Array.from(choices).forEach(element => {
 element.onclick = function() {
 const idx = parseInt(this.dataset.index, 10);
 title.textContent = arr[idx].title;
 paragraph.textContent = arr[idx].paragraph;
 };
});

dataset.index grabs it effortlessly—camelCase magic from HTML5 data attributes. No loop math needed. Great for teams or when buttons have labels like “History” that don’t match array order.

Downside? Manual HTML edits. But for readability? Chef’s kiss.

Scalable Option: Event Delegation

Got dozens of buttons? Or they load dynamically? Ditch per-button listeners. Attach one to a parent (say, .choices-container), let events bubble up, and check event.target.

Assuming a wrapper:

document.querySelector('.choices-container').addEventListener('click', (e) => {
 if (e.target.matches('.choices')) {
 const index = Array.from(choices).indexOf(e.target);
 title.textContent = arr[index].title;
 paragraph.textContent = arr[index].paragraph;
 }
});

matches('.choices') filters noise, indexOf(e.target) finds position. Scales forever—new buttons “just work.” JavaScript.info nails this: one handler, bubbling via event.target.

Tradeoff: slight runtime cost for indexOf. Fine for hundreds, overkill for five. But future-proof.

Combine with data attrs? Even better: const idx = parseInt(e.target.dataset.index);—no Array.from needed.

Best Practices and Performance

textContent for plain text—always. innerHTML tempts XSS if user data sneaks in, as GeeksforGeeks warns.

Accessibility? Add aria-pressed="false" to buttons, toggle on click. Keyboard users thank you.

Performance: forEach index wins for static small sets (Stack Overflow consensus). Delegation for 50+ or dynamic (freeCodeCamp example).

Edge cases: Buttons added post-load? Delegation. Resizing arrays? Data attrs. Debug tip: console.log(index) inside handlers.

Modern twist: addEventListener over onclick for flexibility (remove listeners easily). Your code’s close—arrow functions capture index perfectly.

What about let vs var in loops? ES6 forEach sidesteps old closure pitfalls.

Sources

1. Stack Overflow - Changing button text onclick
2. GeeksforGeeks - How to Change the Button Label when Clicked using JavaScript
3. BobbyHadz - Change button text on Click using JavaScript
4. Permadi - JavaScript: Changing Button’s Text
5. SheCodes - How to Change Text When Clicking in JavaScript
6. Stack Overflow - Get index of clicked element using pure JavaScript
7. Stack Overflow - How to index inside onclick in JavaScript
8. Stack Overflow - Javascript - find the index of clicked button
9. Stack Overflow - Get index of clicked element
10. Stack Overflow - Getting data-* attribute for onclick event
11. Stack Overflow - onclick for all buttons with a data attribute
12. MDN - Array.prototype.forEach()
13. JavaScript.info - Event delegation
14. freeCodeCamp - Event Delegation in JavaScript
15. MDN - Event bubbling
16. JavaScript Tutorial - Event Delegation
17. Envato Tuts+ - HTML5 Data Attributes in JavaScript
18. Dofactory - HTML button data-*
19. Salesforce StackExchange - Get value from attribute after onclick

Conclusion

Stick with the forEach index fix for your five buttons—it’s dead simple, performant, and matches your code style. Scale up? Swap to data attributes or delegation. Either way, your JavaScript onclick text swaps will feel buttery smooth, no classes or hacks needed. Drop that in, refresh, click around—problem solved.