一键禁用多选测试中的Javascript按钮

问题描述 投票：0回答：2

一旦用户做出选择，我就需要在选择多项测验中禁用一组按钮。当前，用户可以根据需要进行任意选择，而没有任何限制。在尝试做出选择后，我尝试禁用分配给按钮的类，但是它要么完全禁用了按钮，以防止做出任何选择，要么根本不做任何事情，并且用户仍然可以为每个问题选择多个答案。

const startButton = document.getElementById('start-btn')
const restartButton = document.getElementById('restart-btn')
const nextButton = document.getElementById('next-btn')
const resultsButton = document.getElementById('results-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
let answerButtonsElement = document.getElementById('answer-buttons')
let imageElement = document.getElementById('image');
let resultsElement = document.getElementById('results');
let text = document.getElementById('text');
const bannerElement = document.getElementById('banner');
const titleElement = document.getElementById('title');

let shuffledQuestions, currentQuestionIndex, shuffledAnswers;
let score;

startButton.addEventListener('click', startGame)
restartButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++;
  setNextQuestion();
  text.classList.add('hide');

})

resultsButton.addEventListener('click', showResults)


function startGame() {
  startButton.classList.add('hide')
  shuffledQuestions = questions.sort(() => Math.random() - .5)
  currentQuestionIndex = 0;
  questionContainerElement.classList.remove('hide')
  setNextQuestion();
  resultsElement.classList.add('hide');
  restartButton.classList.add('hide')
  score = 0;
  text.classList.add('hide');
  answerButtonsElement.classList.remove('hide');
  imageElement.classList.remove('hide');
  bannerElement.classList.add('hide');
  titleElement.classList.add('hide');
  questionElement.classList.remove('hide')
}

function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex]);
}

function showQuestion(question) {
    imageElement.src = question.img;
	  questionElement.innerText = question.question;
	  question.answers.forEach(answer => {
    const button = document.createElement('button');
    button.setAttribute('class', 'choice');
    button.innerText = answer.text;
    button.classList.add('col-6');
    if (answer.correct) {
      button.dataset.correct = answer.correct;
      
    } 
    button.addEventListener('mousedown', selectAnswer);
    button.addEventListener('mouseup', disableButtons);
    
    answerButtonsElement.appendChild(button)
  })
  
}

function resetState() {
  clearStatusClass(document.body);
  nextButton.classList.add('hide');
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
}

function selectAnswer(e) {
  const selectedButton = e.target;
  const correct = selectedButton.dataset.correct;
  text.classList.remove('hide');
  setStatusClass(document.body, correct);
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
  if (shuffledQuestions.length > currentQuestionIndex + 1) {
    nextButton.classList.remove('hide')
  } else {
	resultsButton.classList.remove('hide')	
  }
	if (correct) {
        score += 33.3;
        text.innerHTML = 'That is correct!';
        selectedButton.style.backgroundColor = 'green';
        
	} else {
        text.innerHTML = 'That is incorrect.';
        selectedButton.style.backgroundColor = 'red';
        
    }

}

function disableButtons() {
  answerButtonsElement.disabled = true;
}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  /*if (correct) {
    element.classList.add('correct')
  } else {
    element.classList.add('wrong')
  }*/
}

function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}


function showResults() {
    questionContainerElement.classList.add('hide');
    resultsElement.classList.remove('hide');
    resultsElement.innerHTML = `Your final score was ${score}%!`;
    resultsButton.classList.add('hide');
    restartButton.classList.remove('hide');
    questionElement.classList.add('hide');
    answerButtonsElement.classList.add('hide');
    text.classList.add('hide');
}


const questions = [
  {
    question: 'What is 2 + 2?',
    answers: [
      { text: '5', correct: false },
      { text: '9', correct: false },
			{ text: '4', correct: true },
      { text: '3', correct: false }

    ],
		img: 'https://upload.wikimedia.org/wikipedia/commons/a/a3/2plus2_logo.jpg'
  }, 
  {
    question: 'How many planets are in our solar system?',
    answers: [
      { text: '4', correct: false },
      { text: '8', correct: false },
      { text: '5', correct: false },
      { text: '9', correct: true }
    ],
		img: 'https://static.techspot.com/images2/news/bigimage/2019/11/2019-11-21-image-6.png'
  },
  {
    question: "How many seconds are in an hour?",
    answers: [
      { text: '60', correct: true },
      { text: '30', correct: false },
      { text: '90', correct: false },
      { text: '24', correct: false }
    ],
		img: 'https://ak9.picdn.net/shutterstock/videos/27923419/thumb/7.jpg'
  }
]
.container .card {
  border-radius: 5px;
  box-shadow: 0 0 10px 2px;
}

.answer-buttons {
  margin: 0 auto;
  align-items: center;
  font-size: 1rem;
  display: flex;
  justify-content: center;
}

.col-6 {
  color: white;
  border: 1px solid hsl(var(--hue), 100%, 30%);
  background-color: grey;
  border-radius: 5px;
  color: white;
  outline: none; 
  margin: 2%;
  cursor: pointer;
  justify-content: center;
  max-width: 30%;
  height: auto;
  min-width: 90px; 
}

.btn:hover {
  border-color: red !important;
}

.btn.correct {
  background-color: green;
  color: white;
}

.btn.wrong {
    background-color: red;
    color: white;  
}

.start-btn, .next-btn, .results-btn, .restart-btn {
  font-size: 100%;
  font-weight: bold;
  
}

.controls {
  justify-content: right;
  align-items: right;
}

.hide {
  display: none;
}

#image {
    max-width: 40%;
    padding: 10px;
    box-shadow: 0 0 10px 2px;
    height: auto;
    margin: 5% auto 0 auto;
    border-radius: 6%;
    min-width: 350px;
}

#question {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    margin: 2% auto -2% auto;
}

.col {
    margin: 0 auto;
}

.text {
    margin-top: 2%;
}

.results {
    text-align: center;
    margin: 3% auto;
}

#restart-btn {
    margin: 2% auto;
}

#banner {
  margin: 2% auto;
  max-width: 70%;
  height: auto;
}

#results-btn, #next-btn {
  
}

#title {
  font-size: 200%;
}

#footer {
  color: rgb(237, 29, 36);
}
  <div class="container card text-center mx-auto">
    
    <div id="question-container" class="row hide">
      <div id="question" class="col">Question</div>
    </div>
    <div id="image-container" class="row text-center">
		<img id ="image" class="text-center image hide"/>
    </div>

    <div class="row">
      <p id="text" class="col text text-center"></p> 
    </div>
    <div id="answer-buttons" class="row answer-buttons hide mx-2 mt-1"></div>
    <div id="results" class="results hide row">
        <p class="col">Congratulations!</p>			
    </div>
    <div class="controls row d-flex">
        <button id="start-btn" class="start-btn btn col col-2 mb-5">Start</button>
        <button id="restart-btn" class="restart-btn btn hide col col-2" onclick="restartQuiz()">Restart Quiz</button>
        <button id="next-btn" class="next-btn btn hide col col-2 my-2">Next</button>
        <button id="results-btn" class="results-btn btn hide col col-2 my-2">Get Results!</button>
    </div>
  </div>
https://jsfiddle.net/Al_byte/szb5d1h6/
javascript html
2个回答
0
投票

您未禁用按钮，而是禁用了包含按钮的div。

按照代码的思想，您可以检查div是否被禁用并阻止选择元素的功能。

小提琴：https://jsfiddle.net/toh0v6w9/1/

我已删除mouseButton up事件上的disableButtons函数，在selectAnswer中设置了禁用的attr，并在resetState中重置了禁用的attr

const startButton = document.getElementById('start-btn')
const restartButton = document.getElementById('restart-btn')
const nextButton = document.getElementById('next-btn')
const resultsButton = document.getElementById('results-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
let answerButtonsElement = document.getElementById('answer-buttons')
let imageElement = document.getElementById('image');
let resultsElement = document.getElementById('results');
let text = document.getElementById('text');
const bannerElement = document.getElementById('banner');
const titleElement = document.getElementById('title');

let shuffledQuestions, currentQuestionIndex, shuffledAnswers;
let score;

startButton.addEventListener('click', startGame)
restartButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++;
  setNextQuestion();
  text.classList.add('hide');

})

resultsButton.addEventListener('click', showResults)


function startGame() {
  startButton.classList.add('hide')
  shuffledQuestions = questions.sort(() => Math.random() - .5)
  currentQuestionIndex = 0;
  questionContainerElement.classList.remove('hide')
  setNextQuestion();
  resultsElement.classList.add('hide');
  restartButton.classList.add('hide')
  score = 0;
  text.classList.add('hide');
  answerButtonsElement.classList.remove('hide');
  imageElement.classList.remove('hide');
  bannerElement.classList.add('hide');
  titleElement.classList.add('hide');
  questionElement.classList.remove('hide')
}

function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex]);
}

function showQuestion(question) {
    imageElement.src = question.img;
      questionElement.innerText = question.question;
      question.answers.forEach(answer => {
    const button = document.createElement('button');
    button.setAttribute('class', 'choice');
    button.innerText = answer.text;
    button.classList.add('col-6');
    if (answer.correct) {
      button.dataset.correct = answer.correct;

    } 
    button.addEventListener('mousedown', selectAnswer);

    answerButtonsElement.appendChild(button)
  })

}

function resetState() {
  clearStatusClass(document.body);
  nextButton.classList.add('hide');
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
  answerButtonsElement.disabled = false;
}



function selectAnswer(e) {
    if(!answerButtonsElement.disabled){
  const selectedButton = e.target;
  const correct = selectedButton.dataset.correct;
  text.classList.remove('hide');
  setStatusClass(document.body, correct);
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
  if (shuffledQuestions.length > currentQuestionIndex + 1) {
    nextButton.classList.remove('hide')
  } else {
    resultsButton.classList.remove('hide')  
  }
    if (correct) {
        score += 33.3;
        text.innerHTML = 'That is correct!';
        selectedButton.style.backgroundColor = 'green';

    } else {
        text.innerHTML = 'That is incorrect.';
        selectedButton.style.backgroundColor = 'red';

    }
    answerButtonsElement.disabled = true;
    }

}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  /*if (correct) {
    element.classList.add('correct')
  } else {
    element.classList.add('wrong')
  }*/
}

function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}


function showResults() {
    questionContainerElement.classList.add('hide');
    resultsElement.classList.remove('hide');
    resultsElement.innerHTML = `Your final score was ${score}%!`;
    resultsButton.classList.add('hide');
    restartButton.classList.remove('hide');
    questionElement.classList.add('hide');
    answerButtonsElement.classList.add('hide');
    text.classList.add('hide');
}


const questions = [
  {
    question: 'What is 2 + 2?',
    answers: [
      { text: '5', correct: false },
      { text: '9', correct: false },
            { text: '4', correct: true },
      { text: '3', correct: false }

    ],
        img: 'https://upload.wikimedia.org/wikipedia/commons/a/a3/2plus2_logo.jpg'
  }, 
  {
    question: 'How many planets are in our solar system?',
    answers: [
      { text: '4', correct: false },
      { text: '8', correct: false },
      { text: '5', correct: false },
      { text: '9', correct: true }
    ],
        img: 'https://static.techspot.com/images2/news/bigimage/2019/11/2019-11-21-image-6.png'
  },
  {
    question: "How many seconds are in an hour?",
    answers: [
      { text: '60', correct: true },
      { text: '30', correct: false },
      { text: '90', correct: false },
      { text: '24', correct: false }
    ],
        img: 'https://ak9.picdn.net/shutterstock/videos/27923419/thumb/7.jpg'
  }
]
0
投票

我能够通过使用ID访问父div并使用querySelectorAll()访问所有子元素，然后使用“ pointer-events：none;”来禁用所有按钮的样式来实现这一点。此属性定义是否元素对指针事件做出反应。

我已经在function selectAnswer(e)中添加了代码

let getElem = document.getElementById("answer-buttons").querySelectorAll(".choice");
   for (let i = 0; i < getElem.length; i++) {
      getElem[i].style.pointerEvents = "none";
   }

有小提琴链接https://jsfiddle.net/Arpit09/yhf5sx2u/13/

让我知道这是否对您有帮助

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.