Question

javaScript - 未捕获的类型错误：无法读取未定义的属性“sign”

2021-06-04

144

javascript

我正在尝试为我的小女儿创建简单的数学程序 - 基本上，我只使用 + 和 - 并以以下形式进行简单的求和，例如 2+2=4：

q1 (+ 或 -) q2 = ans

我不希望答案在这个阶段是负数，所以我写了一个 if 语句来尝试说明如果 q1 小于 q2，则仅在等式中使用“+”运算符。但是，这会引发错误：

Uncaught TypeError: Cannot read property 'sign' of undefined.

当我单击按钮时，我希望看到显示的随机数、随机运算符（除非满足 if 条件）和计算出的正确答案。它有时有效，有时它会引发错误并计算出错误的答案...

HTML

<div id = "ques1"></div>
<div id = "oper"></div>
<div id = "ques2"></div>
<div id = "equals">=</div>
<div id = "ans"></div><br>
<button onclick="miniMaths()">click</button>

JS

function miniMaths() {
  var operators = [
    {
      sign: "+",
      method: function (a, b) {
        return a + b;
      }
    },
    {
      sign: "-",
      method: function (a, b) {
        return a - b;
      }
    }
  ];
  var q1 = Math.floor(Math.random() * 5) + 1);
  var q2 = Math.floor(Math.random() * 5) + 1);

  if (q1 > q2) {
    var selectedOperator = Math.floor(Math.random() * operators.length);
  } else {
    var selectedOperator = operators[0];
  }
  var calc1 = operators[selectedOperator].sign;
  var answer = operators[selectedOperator].method(q1, q2);
  document.getElementById("ques1").innerHTML = q1;
  document.getElementById("ques2").innerHTML = q2;
  document.getElementById("oper").innerHTML = calc1;
  document.getElementById("ans").innerHTML = answer;
}

Answer 1

if (q1 > q2) {
    var selectedOperator = Math.floor(Math.random() * operators.length);
  } else {
    var selectedOperator = operators[0]; <----
  }

在本例中，您已将 selectedOperator 与operators[0] 相等，即

{
      sign: "+",
      method: function (a, b) {
        return a + b;
      }
    }

在您尝试获取 operators[selectedOperator] 之后，其为 undefined

您的 JS 文件应如下所示

function miniMaths() {
    var operators = [
        {
            sign: '+',
            method: function (a, b) {
                return a + b;
            },
        },
        {
            sign: '-',
            method: function (a, b) {
                return a - b;
            },
        },
    ];

    var q1 = Math.floor(Math.random() * 5) + 1;
    var q2 = Math.floor(Math.random() * 5) + 1;

    if (q1 > q2) {
        var selectedOperator =
            operators[Math.floor(Math.random() * operators.length)];
    } else {
        var selectedOperator = operators[0];
    }
    var calc1 = selectedOperator.sign;
    var answer = selectedOperator.method(q1, q2);
    document.getElementById('ques1').innerHTML = q1;
    document.getElementById('ques2').innerHTML = q2;
    document.getElementById('oper').innerHTML = calc1;
    document.getElementById('ans').innerHTML = answer;
}

[编辑]：添加了代码片段示例

function miniMaths() {
  var operators = [
      {
          sign: '+',
          method: function (a, b) {
              return a + b;
          },
      },
      {
          sign: '-',
          method: function (a, b) {
              return a - b;
          },
      },
  ];

  var q1 = Math.floor(Math.random() * 5) + 1;
  var q2 = Math.floor(Math.random() * 5) + 1;

  if (q1 > q2) {
      var selectedOperator =
          operators[Math.floor(Math.random() * operators.length)];
  } else {
      var selectedOperator = operators[0];
  }
  var calc1 = selectedOperator.sign;
  var answer = selectedOperator.method(q1, q2);
  console.log('calc1:', calc1);
  console.log('answer:', answer);
}

miniMaths()

Answer 2

您的问题是您在 else 条件中将一个对象分配给 selectedOperator 。相反，您可以简单地将索引位置的值分配给它。请参阅以下代码。

function miniMaths() {
  var operators = [
    {
      sign: "+",
      method: function (a, b) {
        return a + b;
      }
    },
    {
      sign: "-",
      method: function (a, b) {
        return a - b;
      }
    }
  ];
  var q1 = Math.floor(Math.random() * 5) + 1);
  var q2 = Math.floor(Math.random() * 5) + 1);

  if (q1 > q2) {
    var selectedOperator = Math.floor(Math.random() * operators.length);
  } else {
    var selectedOperator = 0;   //This line
  }
  var calc1 = operators[selectedOperator].sign;
  var answer = operators[selectedOperator].method(q1, q2);
  document.getElementById("ques1").innerHTML = q1;
  document.getElementById("ques2").innerHTML = q2;
  document.getElementById("oper").innerHTML = calc1;
  document.getElementById("ans").innerHTML = answer;
}

Answer 3

您的问题出在这行：

var selectedOperator = operators[0];

变量 selectedOperator 将成为您的 operators 数组的索引，它必须是一个整数，但您将整个第一个对象分配给了其中。

q1 和 q2 具有随机值，有时 q1 小于 q2，这将触发该错误。