Question

我正在进行一项测验，但我被困了。我想通过在我的状态对象中的数组（<li>）中添加它们来为state.possibleAnswers添加其他可能的答案。我在第67行的代码中添加了一个随机数生成器，但我想这行肯定有问题，因为答案没有在DOM上显示。任何人都可以查看我的代码并查看导致错误的原因吗？

var state = {
	questions: [
	{number: 1, question:"What is the capital of Perú?", answer: "Lima", display:true}, {number: 2, question:"What is the capital of Ecuador?", answer: "Quito", display:false}, {number: 3, question:"What is the capital of Colombia", answer: "Bogotá", display:false},
	{number: 4, question:"What is the capital of Paraguay?", answer: "Ascuncion", display:false}, {number: 5, question:"What is the capital of Argentina?", answer: "Buenos Aires", display:false}, {number: 6, question:"What is the capital of Chile?", answer: "Santiago", display:false},
	{number: 7, question:"What is the capital of Brazil?", answer: "Brasilia", display:false}, {number: 8, question:"What is the capital of Bolivia?", answer: "La paz", display:false}, {number: 9, question:"What is the capital of Venezuela?", answer: "Caracas", display:false},
	{number: 10, question:"What is the capital of Uruguay", answer: "Lima", display:false}
	],
	correctAnswers: 0,
	possibleAnswers: ['Lima', 'Montevideo', 'Buenos Aires', 'Brasilia', 'Bogota', 'Caracas', 'Quito', 'San José', 'Paramaribo', 'La paz']
};


var template = (
	'<li class="js-quiz-card">' +
		'<h6 class="js-question-number"></h6>' +
		'<h6 class="js-questions-correct"></h6>' +
	
		'<div class="js-card-main-section">' +
			'<h3 class="js-question"></h3>' +
			'<ul class="js-possible-answers">' +
			'<li class="js-answer-1"></li>' +
			'<li class="js-answer-2"></li>' +
			'<li class="js-answer-3"></li>' +
			'<li class="js-answer-4"></li>' +
		'</div>' +
		'<button class="js-next-question-button"> Next question </button>' +
	'</li>'
);

function generateRandomNumber(number) {
	Math.floor(Math.random() * number);
}


// STATE MANAGEMENT

function updateScore (state, index) {
	var selectedChoice = $('.selected').text();
	if (selectedChoice === state.questions[index].answer) {
		state.correctAnswers ++;
	}
}

function changeDisplay (state, index) {
	var currentIndexDisplay = state.questions[index].display;
	state.questions[index].display = !currentIndex;
	var newIndexDisplay = state.questions[index + 1 ].display;
	state.questions[index + 1].display = !newIndex;
}


// DOM MANIPULATION

function renderCard (item, itemId, template, itemDataAttr) {
	var element = $(template);
	if (item.display === false) {
		element.addClass("cards-display");
	}
	
	element.find('.js-question-number').text("Question " + item.number + "of 10");
	element.find('.js-questions-correct').text(state.correctAnswers + " questions correct");
	element.find('.js-question').text(item.question);
	var listItems = element.find('.js-possible-answers').children();
	listItems.eq(Math.floor(Math.random() * 4)).text(item.answer);
	for (var i = 0; i < 4; i++) {
		if (listItems.eq(i).text() === "") {
			listItems.eq(i).text(state.possibleAnswers[Math.floor(Math.random() * 10)]) ;
		}
	}
	element.attr(itemDataAttr, itemId);
	
	return element;
}




function renderList(state, listElement, itemDataAttr) {
	var htmlString = state.questions.map(
		function(item, index){
			return renderCard(item, index, template, itemDataAttr);
		});
	listElement.html(htmlString);
} 


// EVENT LISTENERS

// click the button and add all the li's to the DOM

function startQuiz(state, listElement, itemDataAttr) {
$('.start-quiz-button').click(function(event){
renderList(state, listElement, itemDataAttr);
});
}



function selectAnswer () {
	$('.js-possible-answers').on('click', 'li', function(event){
		event.currentTarget.addClass('selected');
	});
}

function clickNextButton (listElement, itemDataAttr, state) {
$('.js-next-question-button').click(function(event){
	var index = event.currentTarget.parent('.js-quiz-card').attr(itemDataAttr);
	updateScore(state, index);
	$('js-possible-answers').find('.selected').removeClass('selected');
	changeDisplay(state, index);
	renderList(state,listElement, itemDataAttr);
});
}



$(function() {
  
  	// html ul on which we will add all the different question cards
  var listElement = $('.question-cards');
	// we'll use this attribute to store the id of the list item
  var itemDataAttr = 'data-list-item-id';

	


  startQuiz(state, listElement, itemDataAttr);

  selectAnswer();

  clickNextButton();

});

.question-cards{
	border: 2px solid black;
	padding: 20px;
}

.question-card{
	border: 2px solid grey;
	padding: 10px;	
}


.cards-display {
display: none;
}



.selected {
	background-color:  #27E7E1;
}

<!DOCTYPE html>
<html>
<head>
	<title>Quiz night tonight</title>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h1>Quiz night tonight</h1>
<h3>Try to answer 7 questions correctly</h3>
<button class="start-quiz-button">try me</button>

<ul class ='question-cards'> 
	
</ul>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

Answer 1

您的按钮似乎没有点击事件处理程序。因此，当您单击它时，它什么都不做。在Chrome中，您可以通过检查按钮＆amp;单击“事件侦听器”选项卡。它应该显示一个单击事件处理程序，但事实并非如此。在用户点击“试试我”按钮之前，您正在调用clickNextButton函数，该按钮会在HTML中创建下一个问题按钮，因此点击处理程序永远不会被添加。

看来你在第176行调用了clickNextButton而没有任何参数，但你在第150行写的函数需要3个参数。

做一个测验：坚持添加额外的答案

1 个答案: