Tracking True/False dataset in html using javascript

Question

I'm creating a coding quiz and using true/ false datasets in HTML to define the answer. My question is, how would I utilize these datasets to track true/ false in JS? My end goal is to display the score of the quiz.

Here's what it looks like so far:

<div class="post" id="question1" style="display: none;">
        <h3>Question 1:</h3>
        <h4>What does css stand for?</h4>
        <button onclick="display2()" data-answer="true" class="answer-btn">
          Casscading Style Sheet
        </button>
        <button data-answer="false" class="answer-btn">
          Condensed Style Sheet
        </button>
        <button data-answer="false" class="answer-btn">
          Cooperative Sea Shanty
        </button>
        <button data-answer="false" class="answer-btn">
          Colonial Short Shorts
        </button>
      </div>

JavaScript:

var dataTrue
function dataTrue () {
    if (document.getElementsByTagName(data-answer || true, score + 20));
}
var score = 0 + dataTrue();

Answer 1

You can use querySelector and attributes to access the answer:

 var answer = question1.querySelector('[data-answer=true]').innerText console.log("correct answer was:"+answer)

 <div class="post" id="question1" style="display: none;"> <h3>Question 1:</h3> <h4>What does css stand for?</h4> <button onclick="display2()" data-answer="true" class="answer-btn"> Casscading Style Sheet </button> <button data-answer="false" class="answer-btn"> Condensed Style Sheet </button> <button data-answer="false" class="answer-btn"> Cooperative Sea Shanty </button> <button data-answer="false" class="answer-btn"> Colonial Short Shorts </button> </div>

Answer 2

One way is to create a click listener, then access the dataset through e.target.dataset.answer . I went ahead and added another question and a final page to show one way of tracking questions and scores.

 let score = 0, onQuestion = 0 window.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.question')[onQuestion].classList.add('active') document.querySelectorAll('.question button').forEach(b => { b.addEventListener('click', e => { if (e.target.dataset.answer === 'true') { console.log('correct!'); score += 20; document.querySelectorAll('.score').forEach(el => el.innerHTML = score); } else console.log('Failed!'); document.querySelector('.question.active').classList.remove('active'); document.querySelectorAll('.question')[++onQuestion] ? .classList.add('active') }) }) })

 .question { display: none; } .question.active { display: block }

 <div class="post question" id="question1"> <h3>Question 1:</h3> <h4>What does css stand for?</h4> <button data-answer="true" class="answer-btn"> Casscading Style Sheet </button> <button data-answer="false" class="answer-btn"> Condensed Style Sheet </button> <button data-answer="false" class="answer-btn"> Cooperative Sea Shanty </button> <button data-answer="false" class="answer-btn"> Colonial Short Shorts </button> </div> <div class="post question" id="question2"> <h3>Question 2:</h3> <h4>What does abc stand for?</h4> <button data-answer="true" class="answer-btn"> Always Be Closing </button> <button data-answer="false" class="answer-btn"> Alphabets Be Cool </button> <button data-answer="false" class="answer-btn"> Arnold Bites Charlie </button> <button data-answer="false" class="answer-btn"> Arny's Bitter Cheeses </button> </div> <div class="post question" id="question2"> <h1>Quiz Complete. Your score: <span class='score'></span></h1> </div> <hr> <div>Your score: <span class='score'>0</span></div>