时间戳

首页 > 解决方案 > 返回对象而不是函数

javascript - 返回对象而不是函数

问题描述

我试图用 JavaScript 构建一个数学测验，它是定时的，并给出 20 个随机生成的数学问题。但是，当按下开始并且计时器开始而不是输出问题时，我得到[object，Object]。所以我的问题是如何改变它，以便它返回随机生成的问题？

下面是我的 JS：

window.onload = function () {

    var seconds = 00; 
    var tens = 00; 
    var appendTens = document.getElementById("tens");
    var appendSeconds = document.getElementById("seconds");
    var buttonStart = document.getElementById('button-start');
    var Interval ;

    buttonStart.onclick = function() {

      function generateQuestions () {

        let randNum1 = Math.floor(Math.random() * 100) + 1;
        let randNum2 = Math.floor(Math.random() * 100) + 1;

        var op = ["*", "+", "/", "-"][Math.floor(Math.random() * 4)];
        return {number1: randNum1, operator: op, number2: randNum2};

    }

    var problemList = [];
    while (problemList.length < 20) {
        problemList.push(generateQuestions());

        document.getElementById("questions").innerHTML = problemList[0];

    }

       clearInterval(Interval);
       Interval = setInterval(startTimer, 10);



    }


    function startTimer () {
      tens++; 

      if(tens < 9){
        appendTens.innerHTML = "0" + tens;
      }

      if (tens > 9){
        appendTens.innerHTML = tens;

      } 

      if (tens > 99) {
        console.log("seconds");
        seconds++;
        appendSeconds.innerHTML = "0" + seconds;
        tens = 0;
        appendTens.innerHTML = "0" + 0;
      }

      if (seconds > 9){
        appendSeconds.innerHTML = seconds;
      }

    }

  }

标签： javascript

解决方案

这里我给你做了一个简单的例子

var questionsElement = document.querySelector("#questions");

function randInt(max) {
  return Math.floor(Math.random() * max);
}

function randQuestions(len) {
  var questions = [];
  while(questions.length < len) {
    questions.push({number1: randInt(100), operator: ["+","*","-","/"][randInt(4)], number2: randInt(100)});
  }
  return questions;
}

var problemList = randQuestions(20);
for(var i = 0;i < problemList.length; i++) {
  questionsElement.innerHTML += `<li>${problemList[i].number1} ${problemList[i].operator} ${problemList[i].number2} = ?</li>`;
}
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  background-color: lightgreen;
  color: white;
  padding: 10px;
  margin-top: 5px;
  font: bold 20px monospace; 
}
<ul id="questions"></ul>

推荐阅读