Я сейчас работаю над своим проектом, где при загрузке страницы появляется уравнение, сгенерированное со случайными 3 результатами. Все результаты (случайные и правильные) впоследствии отображаются на 4 кнопках. Я хочу, чтобы пользователь увидел div, говорящий «вы нажали неправильный / правильный результат» в зависимости от того, на какой результат он нажал. Я исключаю свой код, который я написал, я не уверен, где я допустил ошибку. Заранее благодарю за помощь!
//html
<div id="count">
<div id="text">
</div>
<div id="results">
<button type="button" class="btn btn-primary button-result" id="button1">Result</button>
<button type="button" class="btn btn-primary button-result" id="button2">Result</button>
<button type="button" class="btn btn-primary button-result" id="button3">Result</button>
<button type="button" class="btn btn-primary button-result" id="button4">Result</button>
</div>
<div id="message">
<div id="heading">
</div>
<div id="message-result">
</div>
</div>
//js
<script>
window.addEventListener('load', function() {
var rnum1 = generateRandomNumber1 ();
var rnum2 = generateRandomNumber2 ();
var rnums = [rnum1, rnum2];
var rnumsSort = rnums.sort(function(a, b){return b-a});
var data= generateRandomOperatorAndCorrectResult(rnumsSort[0],rnumsSort[1]);
var operator=data[0];
var corResult = data[1][0][0];
var ranResult =[data[1][0][1],data[1][0][2],data[1][0][3]];
var allResults = data[1][0];
var sortAllResults = allResults.sort(function(a,b){return a - b});
var buttonText = buttonResult ();
function buttonResult() {
for (var i=0; i< sortAllResults.length; i++){
document.querySelectorAll(".button-result")[i].textContent= sortAllResults[i];} }
document.querySelector("#text").textContent = "How much is " + rnumsSort[0] + operator + rnumsSort[1] + "?"; //til here it works
document.querySelectorAll(".button-result").addEventListener ("click", function(){
var clickedResult = this.textContent;
if( clickedResult === corResult)
{ document.querySelector("#heading").textContent = "Result";
document.querySelector("#message-result").textContent = "This is the right result!";
var messageDiv = document.querySelector("#message");
var nextQuestion = document.createElement("Button");
var t = document.createTextNode ("Next Question");
nextQuestion.appendChild(t);
document.messageDiv.appendChild(nextQuestion);
nextQuestion.setAttribute("href", "/quiz")
}
else { document.querySelector("#heading").textContent = "Result";
document.querySelector("#message-result").textContent = "This is the wrong result. Try again!";
}
}
})
});
function generateRandomOperatorAndCorrectResult (num1, num2) {
var operators = [{
sign: "+",
method: function(rnum1,rnum2){ return rnum1 + rnum2; } },
{
sign: "*",
method: function(rnum1,rnum2){ return rnum1 * rnum2; } },
{
sign: "-",
method: function(rnum1,rnum2){ return rnum1 - rnum2; }
}];
var results = [];
var selectedOperator = Math.floor(Math.random()*operators.length);
var randomOperator = operators[selectedOperator].sign;
var correctResult = (operators[selectedOperator].method(num1, num2)); //pass the numbers to the methods
results.push(correctResult);
var randomResult = generateRandomResults(3);
var result = results.concat(randomResult);
return [randomOperator, [result]];
}