Wie zeige ich Text basierend auf der Schaltfläche an, auf die der Benutzer geklickt hat? ⇐ CSS

[Anonymous]

Ich versuche, den Text auf meiner Website basierend auf der Schaltfläche zu ändern, auf die der Benutzer geklickt hat.
Es gibt insgesamt 5 Schaltflächen.
Hier ist mein Javascript:

Code: Select all

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;
}
})

Ich bin mir nicht sicher, wie ich danach weitermachen soll. Die Ausführung von arr[element] wird offensichtlich nicht funktionieren, da das Element keine Zahl ist, um auf einen Index im Array verweisen zu können. Ich dachte, es gäbe eine eingebaute Funktion, um vielleicht die Position dieses Elements relativ zum übergeordneten Element zu überprüfen, aber ich konnte keine finden. Und gibt es einen besseren Weg, dies zu tun? Ich wollte es mit dem Text in Javascript machen und keine Klassen wie „Sichtbarkeit aktivieren“ und „Deaktivieren“ verwenden.