how to make global function for multiple buttons ( javascript)

Question

I'm making a quiz and for each questin there is a "show hint" button, for each hint, i want to make a single global function ( for clean code purposes) that hides the sentance below it.

it works for one of the buttons for Question 1, but not question 2,3,4

I know this super basic but iam fairly new to JS and i could really appreciate some help, thank you in advance.

 function seeHint() { const hintBtn = document.querySelector(".hintBtn"); const message = document.querySelector(".msg"); hintBtn.addEventListener("click", function() { message.classList.toggle("hidehint"); }); }

 .showhint { display: block; } .hidehint { display: none; }

 <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css2?family=Syne:wght@585&display=swap" rel="stylesheet"> <div class=" container text-center"> <button type="button" class="hintBtn btn btn-secondary" onclick="seeHint()">Need a Hint?</button> <button type="button" class="ansbtn btn btn-info">Answers</button> </div> <div> <div class="text-center"> <div class="msg hidehint"> <p>this is a hint for Question 1</p> </div> </div>

Answer 1

I've changed your markup and CSS a little bit in order to make it a bit easier, there you go.

 const questions = document.getElementsByClassName("question"); //Get all questions for (var i = 0; i < questions.length; i++) { //Iterate for each one of the questions questions[i].addEventListener("click", function(e) { //Attach an event listener on the question, in order to understand this a bit better search for event delegation in JS if(e.target.classList[0] == "hintBtn") { //Check if the target that triggered the event is the hint button this.getElementsByClassName('msg')[0].classList.toggle("hidehint"); //Inside every question find the message and toggle the class } }); }

 .hidehint { display: none; }

 <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css2?family=Syne:wght@585&display=swap" rel="stylesheet"> <div class="question container text-center"> <button type="button" class="hintBtn btn btn-secondary">Need a Hint?</button> <button type="button" class="ansbtn btn btn-info">Answers</button> <div class="text-center"> <div class="msg hidehint"> <p>this is a hint for Question 1</p> </div> </div> </div> <div class="question container text-center"> <button type="button" class="hintBtn btn btn-secondary">Need a Hint?</button> <button type="button" class="ansbtn btn btn-info">Answers</button> <div class="text-center"> <div class="msg hidehint"> <p>this is a hint for Question 2</p> </div> </div> </div> <div class="question container text-center"> <button type="button" class="hintBtn btn btn-secondary">Need a Hint?</button> <button type="button" class="ansbtn btn btn-info">Answers</button> <div class="text-center"> <div class="msg hidehint"> <p>this is a hint for Question 3</p> </div> </div> </div>