javascript - 如何将单击按钮的文本与方程式结果进行比较并生成一个 div 表示“错误结果”或“正确结果”？

Question

我目前正在处理我的项目，当页面加载时，会生成一个带有随机 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]];

        }

标签： javascriptdom