.push() 没有得到预期的结果答案

【问题标题】：.push() not getting results as expected.push() 没有得到预期的结果
【发布时间】：2022-01-24 17:43:20
【问题描述】：

let answerArr = [];
let practicemsg = '';
let correctCounter = 0;
let $practiceButton = $('#practice');

function math() {
  if (correctCounter > 0) {
    correctCounter = 0;
  }
  let operatorArr = ['+', '-', 'x', '/'];
  let expression1 = function(left, right) {
    return +left + +right
  };
  let expression2 = function(left, right) {
    return +left - +right
  };
  let expression3 = function(left, right) {
    return +left * +right
  };
  let expression4 = function(left, right) {
    return +left / +right
  };

  let left = Math.floor(Math.random() * 10 + 1);
  let right = Math.floor(Math.random() * 10 + 1);
  let operatorRand = Math.floor(Math.random() * 4);
  switch (operatorArr[operatorRand]) {
    case '+':
      answerArr.push(expression1(left, right));
      break;
    case '-':
      while (Math.sign(left - right) === -1 || (left - right) === 0) {
        left = Math.floor(Math.random() * 10 + 1);
        right = Math.floor(Math.random() * 10 + 1);
      }
      answerArr.push(expression2(left, right));
      break;
    case 'x':
      answerArr.push(expression3(left, right));
      break;
    case '/':
      while ((left % right) != 0) {
        left = Math.floor(Math.random() * 10 + 1);
        right = Math.floor(Math.random() * 10 + 1);
      }
      answerArr.push(expression4(left, right));
      break;
  }
  let expressionReturned = left + operatorArr[operatorRand] + right + ' = ' + '<br />';
  return expressionReturned;
}
$($practiceButton).on('click', function() {
  $('#page2').toggle();
  if (practicemsg.length > 0) {
    practicemsg = "";
  }
  for (let i = 0; i < 10; i++) {
    practicemsg += math();
    //$("#question").html(practicemsg);
  }
  //console.log(practicemsg);
  $("#question").html(practicemsg);
});
$('.again').on('click', function() {
  if (practicemsg.length > 0) {
    practicemsg = "";
  }
  for (let i = 0; i < 10; i++) {
    practicemsg += math();
    //$("#question").html(practicemsg);
  }
  //console.log(practicemsg);
  $("#question").html(practicemsg);
});

#blackboard2 {
  background-color: #425a5a;
  border: 25px solid #523620;
  border-radius: 20px;
  margin: 0px auto;
  padding: 20px 20px;
  line-height: 1.5;
  letter-spacing: 0.125em;
  display: flex;
}

#question {
  display: flex;
  flex-direction: column;
  width: 350px;
  align-items: flex-end;
  line-height: 1.7;
}
.answer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<section id="page2">
  <div id="choices">
    <button class="practice" id="practice" name="practice" type="button" value="practice">Practice</button>
  </div>
</section>
<section id="page1">
  <section id="blackboard2">
    <div id="question" class="ques">
    </div>
    <div id="answer" class="answer">
            <input id="1" class="answerInput" type="text" name="answer0" size="5" maxlength="5" />
            <input id="2" class="answerInput" type="text" name="answer1" size="5" maxlength="5" />
            <input id="3" class="answerInput" type="text" name="answer2" size="5" maxlength="5" />
            <input id="4" class="answerInput" type="text" name="answer3" size="5" maxlength="5" />
            <input id="5" class="answerInput" type="text" name="answer4" size="5" maxlength="5" />
            <input id="6" class="answerInput" type="text" name="answer5" size="5" maxlength="5" />
            <input id="7" class="answerInput" type="text" name="answer6" size="5" maxlength="5" />
            <input id="8" class="answerInput" type="text" name="answer7" size="5" maxlength="5" />
            <input id="9" class="answerInput" type="text" name="answer8" size="5" maxlength="5" />
            <input id="10" class="answerInput" type="text" name="answer9" size="5" maxlength="5" />
        </div>

  </section>


  <button class="check" id="check" name="check" type="button" value="check">Check</button>

  <button class="again" id="again" name="again" type="button" value="check">Again</button>
</section>

下面是代码在尝试将函数移出之前的样子

$(function() {
  let i = 1;
  let $practiceButton = $('#practice');


  let answerArr = [];
  let practicemsg = '';
  let correctCounter = 0;
  $($practiceButton).on('click', function() {
    $('#page2').toggle();
    if (correctCounter > 0) {
      correctCounter = 0;
    }

    let operatorArr = ['+', '-', 'x', '/'];

    let expression1 = function(left, right) {
      return +left + +right
    };
    let expression2 = function(left, right) {
      return +left - +right
    };
    let expression3 = function(left, right) {
      return +left * +right
    };
    let expression4 = function(left, right) {
      return +left / +right
    };
    let mg = '';

    for (let i = 0; i < 10; i++) {
      answerArr.pop();
    }
    while (i < 11) {
      let left = Math.floor(Math.random() * 10 + 1);
      let right = Math.floor(Math.random() * 10 + 1);
      let operatorRand = Math.floor(Math.random() * 4);

      switch (operatorArr[operatorRand]) {
        case '+':
          answerArr.push(expression1(left, right));
          break;
        case '-':
          while (Math.sign(left - right) === -1 || (left - right) === 0) {
            left = Math.floor(Math.random() * 10 + 1);
            right = Math.floor(Math.random() * 10 + 1);
          }
          answerArr.push(expression2(left, right));
          break;
        case 'x':
          answerArr.push(expression3(left, right));
          break;
        case '/':
          while ((left % right) != 0) {
            left = Math.floor(Math.random() * 10 + 1);
            right = Math.floor(Math.random() * 10 + 1);
          }
          answerArr.push(expression4(left, right));
          break;
      }
      practicemsg += left + operatorArr[operatorRand] + right + ' = ' + '<br />';
      i++;
    }

    //console.log(answerArr);
    let $answer = $('input.answerInput');
    //let $a1 = $('input#1');                  
    let $a2 = $('input#2');
    let $a3 = $('input#3');
    let $a4 = $('input#4');
    let $a5 = $('input#5');
    let $a6 = $('input#6');
    let $a7 = $('input#7');
    let $a8 = $('input#8');
    let $a9 = $('input#9');
    let $a10 = $('input#10');
    let aArr = [];
    $('#answer').on('input', function(e) {
      e.preventDefault();
      let an1 = $('input#1').val();
      let an2 = $a2.val();
      let an3 = $a3.val();
      let an4 = $a4.val();
      let an5 = $a5.val();
      let an6 = $a6.val();
      let an7 = $a7.val();
      let an8 = $a8.val();
      let an9 = $a9.val();
      let an10 = $a10.val();
      aArr = [an1, an2, an3, an4, an5, an6, an7, an8, an9, an10];
    });

    $('#check').on('click', function compare2() {
      if (correctCounter > 0) {
        correctCounter = 0;
      }
      for (let index = 0; index < 10; index++) {
        if (aArr[index] == answerArr[index]) {
          correctCounter++;
        }
      }
      $('#answer').toggle();
      $('#question').html("");
      let letter = '';

      if ((correctCounter / 10) * 100 == 100) {
        letter = 'A+'
      } else if ((correctCounter / 10) * 100 > 89) {
        letter = 'A-';
      } else if ((correctCounter / 10) * 100 > 84) {
        letter = 'B+';
      } else if ((correctCounter / 10) * 100 > 79) {
        letter = 'B-';
      } else if ((correctCounter / 10) * 100 > 74) {
        letter = 'C+';
      } else if ((correctCounter / 10) * 100 > 69) {
        letter = 'C-'
      } else {
        letter = 'Keep Trying';
      }
      $('#question').html('<h1 class="done">' + (correctCounter / 10) * 100 + '%' + '<br />' + '<h2 class="saying">' + letter + '</h2>' + '</h1>');
    });
    $("#question").html(practicemsg);
    if (i == 11) {
      i = 1;
      practicemsg = "";
    }
  });
});

#blackboard2 {
  background-color: #425a5a;
  border: 25px solid #523620;
  border-radius: 20px;
  margin: 0px auto;
  padding: 20px 20px;
  line-height: 1.5;
  letter-spacing: 0.125em;
  display: flex;
}

#question {
  display: flex;
  flex-direction: column;
  width: 350px;
  align-items: flex-end;
  line-height: 1.7;
}

.answer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="page2">
  <div id="choices">
    <button class="practice" id="practice" name="practice" type="button" value="practice">Practice</button>
  </div>

</section>
<section id="page1">
  <section id="blackboard2">
    <div id="question" class="ques">
    </div>
    <div id="answer" class="answer">
      <input id="1" class="answerInput" type="text" name="answer0" size="5" maxlength="5" />
      <input id="2" class="answerInput" type="text" name="answer1" size="5" maxlength="5" />
      <input id="3" class="answerInput" type="text" name="answer2" size="5" maxlength="5" />
      <input id="4" class="answerInput" type="text" name="answer3" size="5" maxlength="5" />
      <input id="5" class="answerInput" type="text" name="answer4" size="5" maxlength="5" />
      <input id="6" class="answerInput" type="text" name="answer5" size="5" maxlength="5" />
      <input id="7" class="answerInput" type="text" name="answer6" size="5" maxlength="5" />
      <input id="8" class="answerInput" type="text" name="answer7" size="5" maxlength="5" />
      <input id="9" class="answerInput" type="text" name="answer8" size="5" maxlength="5" />
      <input id="10" class="answerInput" type="text" name="answer9" size="5" maxlength="5" />
    </div>
  </section>

  <button class="check" id="check" name="check" type="button" value="check">Check</button>

  <button class="again" id="again" name="again" type="button" value="check">Again</button>
</section>

不知道我做错了什么，但我把这个数学函数连接到了 practiceButton，工作正常，但现在我想把它作为一个独立的函数移出，所以当我点击“再次”时，它只会运行给我十个的函数更多的数学问题，而不必刷新页面。我有它把答案推到一个数组中，因为我有一个“检查”按钮，可以检查答案数组到输入答案的数组。我的问题是为什么或我错过了什么，它没有进入 answerArr。我检查了记录从表达式返回的内容，它给了我答案，但它没有推入 answerArr 数组。

【问题讨论】：

不明白重复代码的连接。你能把这一切都写成StackSnippets
practiceButton 代码只是为了表明这是我的原始代码，但后来我想添加“如果您还想要十个问题怎么办”，这就是我的问题在于尝试获得“再次”按钮
$practiceButton 是从哪里来的？
将其添加到 sn-p
请举例说明您的期望与您得到的。目前尚不清楚问题出在哪里，因为不清楚您要完成什么。

标签： javascript html jquery arrays

【解决方案1】：

考虑以下内容。

let answerArr = [];
let practicemsg = '';
let correctCounter = 0;
let $practiceButton = $('#practice');
let operatorArr = ["+", "-", "x", "/"];

var math = {
  add: function(left, right) {
    var result = NaN;
    if (!isNaN(left) && !isNaN(right)) {
      result = left + right;
    }
    return result;
  },
  subtract: function(left, right) {
    var result = NaN;
    if (!isNaN(left) && !isNaN(right)) {
      result = left - right;
    }
    return result;
  },
  multiply: function(left, right) {
    var result = NaN;
    if (!isNaN(left) && !isNaN(right)) {
      result = left * right;
    }
    return result;
  },
  divide: function(left, right) {
    var result = NaN;
    if (!isNaN(left) && !isNaN(right)) {
      result = left / right;
    }
    return result;
  }
}

function initPractice() {

  let left = Math.floor(Math.random() * 10 + 1);
  let right = Math.floor(Math.random() * 10 + 1);
  let operatorRand = Math.floor(Math.random() * 4);
  switch (operatorArr[operatorRand]) {
    case '+':
      answerArr.push(math.add(left, right));
      break;
    case '-':
      while (Math.sign(left - right) === -1 || (left - right) === 0) {
        left = Math.floor(Math.random() * 10 + 1);
        right = Math.floor(Math.random() * 10 + 1);
      }
      answerArr.push(math.subtract(left, right));
      break;
    case 'x':
      answerArr.push(math.multiply(left, right));
      break;
    case '/':
      while ((left % right) != 0) {
        left = Math.floor(Math.random() * 10 + 1);
        right = Math.floor(Math.random() * 10 + 1);
      }
      answerArr.push(math.divide(left, right));
      break;
  }
  let expressionReturned = "<div class='equation'><span class='left'>" + left + "</span><span class='operator'>" + operatorArr[operatorRand] + "</span><span class='right'>" + right + '</span> = </div>';
  return expressionReturned;
}

$($practiceButton).on('click', function() {
  $('#page2').toggle();
  if (practicemsg.length > 0) {
    practicemsg = "";
  }
  for (let i = 0; i < 10; i++) {
    practicemsg += initPractice();
  }
  $("#question").html(practicemsg);
  console.log(answerArr);
});

$('.again').on('click', function() {
  if (practicemsg.length > 0) {
    practicemsg = "";
  }
  for (let i = 0; i < 10; i++) {
    practicemsg += initPractice();
  }
  $("#question").html(practicemsg);
});

#blackboard2 {
  background-color: #425a5a;
  border: 25px solid #523620;
  border-radius: 20px;
  margin: 0px auto;
  padding: 20px 20px;
  line-height: 1.5;
  letter-spacing: 0.125em;
  display: flex;
}

#question {
  display: flex;
  flex-direction: column;
  width: 350px;
  align-items: flex-end;
  line-height: 1.7;
}

#question .equation {
  font-family: monospace;
  font-size: 14px;
}

.answer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<section id="page2">
  <div id="choices">
    <button class="practice" id="practice" name="practice" type="button" value="practice">Practice</button>
  </div>
</section>
<section id="page1">
  <section id="blackboard2">
    <div id="question" class="ques">
    </div>
    <div id="answer" class="answer">
      <input id="1" class="answerInput" type="text" name="answer0" size="5" maxlength="5" />
      <input id="2" class="answerInput" type="text" name="answer1" size="5" maxlength="5" />
      <input id="3" class="answerInput" type="text" name="answer2" size="5" maxlength="5" />
      <input id="4" class="answerInput" type="text" name="answer3" size="5" maxlength="5" />
      <input id="5" class="answerInput" type="text" name="answer4" size="5" maxlength="5" />
      <input id="6" class="answerInput" type="text" name="answer5" size="5" maxlength="5" />
      <input id="7" class="answerInput" type="text" name="answer6" size="5" maxlength="5" />
      <input id="8" class="answerInput" type="text" name="answer7" size="5" maxlength="5" />
      <input id="9" class="answerInput" type="text" name="answer8" size="5" maxlength="5" />
      <input id="10" class="answerInput" type="text" name="answer9" size="5" maxlength="5" />
    </div>

  </section>


  <button class="check" id="check" name="check" type="button" value="check">Check</button>

  <button class="again" id="again" name="again" type="button" value="check">Again</button>
</section>

这会将数学方程式分组到一个对象中，以便于参考。尽可能在另一个函数中定义函数不是一个好习惯。

我还包装了方程式，它是第 1 部分以便于造型。

【讨论】：

谢谢！