Question

我试图为孩子们创建一个数学游戏，让玩家知道他的名字和玩家选择他正在玩的等级，我将如何从我的javascript到我的html页面显示随机数学问题，但数字是生成的不是只显示标志，这是我的脚本我将其链接到我的外部html。这是我的代码：

var pageName = location.pathname.split("/").slice(-1);
window.addEventListener('load', function () {
  alert(pageName);
  randomOpr();
  pageAction();
});
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
function pageAction() {
  if (pageName == "level1.html") {
    num1.innerHTML = Math.floor(Math.random() * 20 + 1);
    num2.innerHTML = Math.floor(Math.random() * 20 + 1);
  } else if (pageName == "level2.html") {
    num1.innerHTML = Math.floor(Math.random() * 30 + 21);
    num2.innerHTML = Math.floor(Math.random() * 30 + 21);
  } else if (pageName == "level3.html") {
    num1.innerHTML = Math.floor(Math.random() * 50 + 51);
    num2.innerHTML = Math.floor(Math.random() * 50 + 51);
  }
}
var operators = ['+', '-', '*', '/']
var selectedOperator = Math.floor(Math.random() * operators.length);

function randomOpr() {
  var operator = document.getElementById("opr");
  alert((operator).value);
  operator.innerHTML = operators[selectedOperator];
}

function checkMath() {
  var num1 = parseInt(document.getElementById("num1").innerHTML, 10);
  var num2 = parseInt(document.getElementById("num2").innerHTML, 10);
  var answer = parseInt(document.getElementById("answer").value, 10);
  if (operators[selectedOperator] == "+") {
    if (answer === num1 + num2) {
      alert("your answer is correct");
    } else {
      alert(answer + " is incorrect, correct answer is " + (num1 + num2));
    }
  } else if (operators[selectedOperator].sign == "-") {
    if (answer === num1 - num2) {
      alert("your answer is correct");
    } else {
      alert(answer + " is incorrect, correct answer is " + (num1 - num2));
    }
  } else if (operators[selectedOperator].sign == "*") {
    if (answer === num1 - num2) {
      alert("your answer is correct");
    } else {
      alert(answer + " is incorrect, correct answer is " + (num1 * num2));
    }
  } else if (operators[selectedOperator].sign == "/") {
    if (answer === num1 - num2) {
      alert("your answer is correct");
    } else {
      alert(answer + " is incorrect, correct answer is " + (num1 / num2));
    }
  }
  document.getElementById("answer").value = "";
  randomNum();
}

Answer 1

按照评论中的建议清理代码。

无需再次获取问题中的数字（生成时已经有了这些数字）。

无需为每个操作员重复答案检查和警报代码。

在四个支票中的三个中，'运营商[selectedOperator] .sign'中的'签名'是什么？ - 删除。

什么是randomNum（）？ - 删除。

我还会检查除法问题的值......

<body>

    <div id="num1"></div>
    <div id="opr"></div>
    <div id="num2"></div>
    <div>
        <input type=text id="answer">
    </div>
    <button id="btnAnswer">Check answer</button>

    <script>
        $(function () {
            $("#btnAnswer").click(checkMath)
        });

        // Set up re-usable variables first.
        var pageName = location.pathname.split("/").slice(-1);
        var operators = ['+', '-', '*', '/']
        var num1 = document.getElementById("num1");
        var num2 = document.getElementById("num2");
        var answerInput = document.getElementById("answer");
        var operator = document.getElementById("opr");
        // The values of the numbers to use in the question, current Operator, and calculated answer.
        var leftNumber = 0;
        var rightNumber = 0;
        var selectedOperator = "";
        var answer = 0;


        window.addEventListener('load', function () {
            alert(pageName);
            pageAction();
        });

        function pageAction() {
            // Use a switch to perform the check on the level, then set the multiplier.
            var multiplier = 0;

            switch (pageName) {
                case "level1.html":
                    multiplier = 20;
                    break;
                case "level2.html":
                    multiplier = 30;
                    break;
                case "level3.html":
                    multiplier = 50;
                    break;
                default:
                    multiplier = 20;
                    break;
            }

            // Generate the numbers, set them on the page, and get a random Operator.
            leftNumber = Math.floor(Math.random() * multiplier + 1);
            rightNumber = Math.floor(Math.random() * multiplier + 1);
            num1.innerText = leftNumber;
            num2.innerText = rightNumber;
            answerInput.value = "";
            randomOpr();

            // Calculate the answer for later use.
            switch (selectedOperator) {
                case "+":
                    answer = leftNumber + rightNumber;
                    break;
                case "-":
                    answer = leftNumber - rightNumber;
                    break;
                case "*":
                    answer = leftNumber * rightNumber;
                    break;
                case "/":
                    answer = leftNumber / rightNumber;
                    break;
                default:
                    answer = leftNumber + rightNumber;
                    break;
            }
        }


        function randomOpr() {
            // Set the current Operator, update the page control.
            selectedOperator = operators[Math.floor(Math.random() * operators.length)];
            operator.innerText = selectedOperator;
            alert((operator).innerText);
        }

        function checkMath() {
            // Check submitted answer against the calculated one, then re-run for another question.
            var submittedAnswer = parseInt(answerInput.value, 10);

            if (submittedAnswer === answer) {
                alert("your answer is correct");
            } else {
                alert(submittedAnswer + " is incorrect, correct answer is " + answer);
            }
            pageAction();
        }

    </script>

</body>

如何从我的javascript到我的html页面显示随机数学问题，但要生成的数字不仅仅显示符号

1 个答案: