Although this question may have been addressed before, I am having trouble finding the solution due to my inability to articulate the problem.
Let me provide an example of the code:
<script>
function choose(element){
var parent = element.parentNode;
var nextquestion = parseInt(parent.dataset.number)+1;
parent.style.display = "none";
if (document.getElementsByClassName("QuestionGroup")[0].dataset.number === nextquestion) {
WHATGOESHERE?.style.display = "inline";
}
}
</script>
<div class="QuestionGroup" data-number="1" style="display:inline;">
<button onclick="choose(this);">An Answer</button></div>
<div class="QuestionGroup" data-number="2">Second Question</div>
Essentially, when the user clicks the button, the choose() function will identify which question group the button belongs to. It will then hide that group and reveal the second question group. Everything works smoothly until I try to reveal the next question.
I have used an if statement to search for all elements with the class "QuestionGroup" and compare their data-number attribute to the nextquestion variable. If they match, I want to modify the style of that element. However, I am at a loss on how to actually target that specific element to change its style.