Как показать текст на основе кнопки, нажатой пользователем ⇐ Javascript

[Anonymous]

Я пытаюсь изменить текст на своем сайте в зависимости от кнопки, которую нажал пользователь.
Всего 5 кнопок.
Вот мой javascript:

Код: Выделить всё

const choices = document.getElementsByClassName("choices");
const title = document.querySelector(".mainInfo h2");
const paragraph = document.querySelector(".mainInfo p");

class aboutUs{
constructor(title, paragraph){
this.title = title;
this.paragraph = paragraph;
}
}
let history = new aboutUs("Our History", "As a company we thr");
let goals = new aboutUs("Our Goals", "Our goals are as follows");
let team = new aboutUs("Our Team", "Our Team consists of");
let values = new aboutUs("Our Values", "The values we protect here at 45 Degrees are");
let why = new aboutUs("Why", "The Why is one of our favorite things to talk about");

let arr = [history, goals, team, values, why]

Array.from(choices).forEach(element =>{
element.onclick = function(){
console.log(element)
// title.textContent = arr[element].title;
// paragraph.textContent = arr[element].paragraph;
}
})

Я не уверен, как продолжить после этого, выполнение arr[element] явно не сработает, потому что элемент не является числом, которое может указывать на индекс в массиве. Я думал, что будет встроенная функция, которая, возможно, будет проверять положение этого элемента относительно родительского элемента, но я не смог ее найти. и есть ли лучший способ сделать это? я хотел сделать это с текстом в JavaScript, а не использовать такие классы, как включение и отключение видимости.

Подробнее здесь: https://stackoverflow.com/questions/798 ... er-clicked