error on math game made with js and jquery? infinite loop

Question

i am making a math game but i am stuck, the game should be like this, first a + if the answer of input is equal to the + then another operator with other number will show, this will be the -, and the same process, then go the * and then restart again + - *, but my script its stuck on - every time and i dont see why here a jsdfile (the styles are a little broken here)

and the code

var puntos = 0;
randomiseiconscycle1();

function randomiseiconscycle1() {
  $("#buttonstart").click(function() {
    $("#buttonstart").css("display", "none")
    $("#why").css("display", "none")
    $(".ahke").css("margin", "0")
    $("#atr").css("margin", "0")
    $(".f1").css("display", "none")
    $("#mathbox").show("slide", 1000);
  });
  var minNumber = 0;
  var maxNumber = 20;
  var randomNumber = 0;
  var randomNumber2 = 0;
  randomNumber = randomNumberFromRange(minNumber, maxNumber);
  randomNumber2 = randomNumberFromRange(minNumber, maxNumber);

  function randomNumberFromRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  $("#num1").text(randomNumber);
  $("#operador").text("+");
  $("#num2").text(randomNumber2);
  var resultado = randomNumber + randomNumber2;
  $("#resultado").on("input", function() {
    var input = $('#resultado').val();
    if (input == resultado) {
      input = $('#resultado').val("");
      minNumber = 1;
      puntos += 1;
      maxNumber = 15;
      randomNumber = 0;
      randomNumber2 = 0;
      randomNumber = randomNumberFromRange(minNumber, maxNumber);
      randomNumber2 = randomNumberFromRange(minNumber, maxNumber);
      $("#num1").text(randomNumber);
      $("#operador").text("-");
      $("#num2").text(randomNumber2);
      resultado = randomNumber - randomNumber2;

      if (input == resultado) {
        console.log("resta0");
        input = $('#resultado').val("");
        minNumber = 1;
        maxNumber = 8;
        puntos += 1;
        randomNumber = 0;
        randomNumber2 = 0;
        randomNumber = randomNumberFromRange(minNumber, maxNumber);
        randomNumber2 = randomNumberFromRange(minNumber, maxNumber);
        $("#num1").text(randomNumber);
        $("#num2").text(randomNumber2);
        $("#operador").text("*");
        resultado = randomNumber * randomNumber2;

        if (input == resultado) {
          puntos += 1;
          randomNumber = 0;
          randomNumber2 = 0;
          input = $('#resultado').val("");
          randomiseiconscycle1();
        }
      }
    }
  });
}

and sometimes autopass the if without the correct answer?

Typically folks that post questions, at the very least, acknowledge that people tried to help them. — Jesse Q, May 25 '18 at 02:44

Jesse Q · Answer 1 · 2018-05-18T22:26:17.453

After each time you enter something in the input box, the "on input" fires. It evaluates the first:

if (input == resultado) {

when it matches that (evaluates to true), you change resultado:

resultado = randomNumber - randomNumber2;

So your second (third, fourth,...) if (input == resultado) { evaluates to false, and you essentially start over at the top.

UPDATED with solution to go with answer:

var ops = ['+', '-', '*', '/'];
var idx = 1;
$("#resultado").on("input", function() {
    var input = $('#resultado').val();
    if (input == resultado) {
        switch(idx) {
        case 0:
           //move your + here
           break;
        case 1:
           input = $('#resultado').val("");
           minNumber = 1;
           puntos += 1;
           maxNumber = 15;
           randomNumber= 0;
           randomNumber2= 0;
           randomNumber = randomNumberFromRange(minNumber, maxNumber);
           randomNumber2 = randomNumberFromRange(minNumber, maxNumber);
           $("#num1").text(randomNumber);
           $("#operador").text(ops[idx++]);
           $("#num2").text(randomNumber2);
           resultado = randomNumber - randomNumber2;
           break;
        case 2:
            console.log("resta0");
            input = $('#resultado').val("");
            minNumber = 1;
            maxNumber = 8;
            puntos += 1;
            randomNumber= 0;
            randomNumber2= 0;
            randomNumber = randomNumberFromRange(minNumber, maxNumber);
            randomNumber2 = randomNumberFromRange(minNumber, maxNumber);
            $("#num1").text(randomNumber);
            $("#num2").text(randomNumber2);
            $("#operador").text(ops[idx++]);
            resultado = randomNumber * randomNumber2;
           break;
        case 3:
           puntos += 1;
           randomNumber= 0;
           randomNumber2= 0;
           input = $('#resultado').val("");
           randomiseiconscycle1();
           break;
        default:
           //do something else
        }
    }

Note: I tried to leave your code as written, so you would recognize it. I would very much recommend moving the resetting/reassignment of values to separate functions.

score 0 · Answer 2 · answered May 18 '18 at 22:26

You're only changing to * when the input is equal to the subtraction of the new problem you just displayed. But input still contains the user's answer to the previous problem. So this will only be true if the new problem has the same answer as the previous one.

Doing this as nested if statements is the wrong way, because you're doing the second if before the user has had a chance to respond to the new problem. You should use a different way to cycle through the operators, such as an array. Use a global variable to keep your current position in the array.

var puntos = 0;
randomiseiconscycle1();

function randomiseiconscycle1() {
  var operators = [{
      char: '+',
      func: (x, y) => x + y,
      min: 0,
      max: 20
    },
    {
      char: '-',
      func: (x, y) => x - y,
      min: 1,
      max: 15
    },
    {
      char: '*',
      func: (x, y) => x * y,
      min: 1,
      max: 8
    }
  ];
  var opindex = -1;
  $("#buttonstart").click(function() {
    $("#buttonstart").css("display", "none")
    $("#why").css("display", "none")
    $(".ahke").css("margin", "0")
    $("#atr").css("margin", "0")
    $(".f1").css("display", "none")
    $("#mathbox").show();
  });

  var resultado;


  function randomNumberFromRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  function showProblem() {
    opindex = (opindex + 1) % operators.length;
    var randomNumber = randomNumberFromRange(operators[opindex].min, operators[opindex].max);
    var randomNumber2 = randomNumberFromRange(operators[opindex].min, operators[opindex].max);
    $("#num1").text(randomNumber);
    $("#operador").text(operators[opindex].char);
    $("#num2").text(randomNumber2);
    resultado = operators[opindex].func(randomNumber, randomNumber2);
    $("#resultado").val("");
  }
  showProblem();
  $("#resultado").on("input", function() {
    var input = $('#resultado').val();
    if (input == resultado) {
      puntos += 1;
      showProblem();
    }
  });
}

/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */


/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}


/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}


/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* ==========================================================================
   Helper classes
   ========================================================================== */


/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}


/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  /* 1 */
}


/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}


/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

.f1 {
  text-align: center;
  margin: 0;
  font-size: 4rem;
  text-transform: uppercase;
  font-family: 'Arvo', serif;
  text-shadow: 3px 4px 2px rgb(150, 150, 150);
}

#g1 {
  margin-top: 3%
}

#atr {
  margin-top: 5%;
  text-align: center;
  width: 100%;
}

#why:hover {
  background-color: #9c43ccdb;
  transition: 0.6s ease-in;
  color: #ffffffeb;
}

#why {
  text-decoration: none;
  font-size: 3rem;
  color: white;
  font-family: 'Arvo', serif;
  padding: 0 5%;
  box-shadow: 1px 0px 1px #2e134dc9, 0px 1px 1px #7a34cac9, 2px 1px 1px #2e134dc9, 1px 2px 1px #7a34cac9, 3px 2px 1px #2e134dc9, 2px 3px 1px #7a34cac9, 4px 3px 1px #2e134dc9, 3px 4px 1px #7a34cac9, 5px 4px 1px #2e134dc9, 4px 5px 1px #7a34cac9, 6px 5px 1px #2e134dc9;
  background-color: #7a34cac9;
  text-transform: uppercase;
}

#g3 {
  position: relative;
  text-align: center;
}

#g2 {
  display: inline-block;
  position: relative;
  z-index: 5;
}

#g4 {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  animation: mymove 5s forwards;
}


/* Safari 4.0 - 8.0 */


/* Standard syntax */

@keyframes mymove {
  0% {
    top: 0px;
    background: #f1f1f1;
    width: 0%;
  }
  100% {
    top: 0px;
    background: #f1f1f1;
    width: 100%;
  }
}

#tittle {
  position: relative;
  top: 4%;
  color: white;
  text-shadow: 3px 4px 2px #00000082;
}

#tittle3 {
  position: relative;
  top: 2%;
  font-size: 1.5rem;
  color: white;
  margin-top: 5%;
  text-shadow: none;
}

#background {
  background-color: #2D97CB;
  height: 100vh;
  width: 100vw;
}

#tittle2 {
  position: relative;
  top: 4%;
  color: white;
  text-shadow: 3px 4px 2px #00000082;
  margin-top: 0%;
}

.why2 {
  background-color: #2f6986 !important;
  box-shadow: 1px 0px 1px #10374b, 0px 1px 1px #1f4e66, 2px 1px 1px #10374b, 1px 2px 1px #1f4e66, 3px 2px 1px #10374b, 2px 3px 1px #1f4e66, 4px 3px 1px #10374b, 3px 4px 1px #1f4e66, 5px 4px 1px #10374b, 4px 5px 1px #1f4e66, 6px 5px 1px #10374b !important;
}

.why2:hover {
  background-color: #1a5573 !important;
  transition: 0.6s ease-in !important;
  color: #ffffffeb !important;
}

.f2 {
  color: #6cff53ba !important;
  margin: 1%;
  display: inline-block;
}

#buttonstart {
  border: none;
  padding: 0;
  background-color: #6AB1D4;
  margin: 0;
}

#mathbox {
  margin: auto;
  width: 80vw;
  height: 70vh;
  background-color: #e8e8e854;
  display: none;
  top: 10vh;
  position: relative;
}

#resultado {
  padding: 0;
  border: 0;
  width: 20vw;
  height: 5vh;
  position: absolute;
  bottom: 5%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  border: 1px solid #7e7e98b0;
  color: black;
  font-weight: bold;
  text-align: center;
  background-color: #4ea4ce;
}

#demo {
  color: white;
  font-size: 3rem;
  font-family: sans-serif;
  margin: 0;
  position: relative;
  bottom: -1rem;
}

#circle {
  border-radius: 50%;
  background-color: #ffffff33;
  width: 3.3rem;
  height: 3.3rem;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#circle {
  border: 1rem solid #ffffff33;
  border-radius: 50%;
  border-top: 1rem solid #ffffff69;
  width: 4rem;
  height: 4rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#operaciones {
  margin: auto;
  width: 45vw;
  height: 30vh;
  background-color: #3b86ab69;
  position: absolute;
  top: 10vh;
  border: 1px solid #3f95bf;
  left: 0;
  right: 0;
  bottom: 0;
}

.op {
  color: white;
  font-size: 3rem;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  font-family: sans-serif;
  top: 50%;
  transform: translateY(-50%);
}

#operador {
  margin: 0 1.5rem;
  vertical-align: middle;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#atr54 {
  position: relative;
  width: 45vw;
  height: 30vh;
}

#submit2 {
  display: none;
}

.retry {
  background-color: #2f6986 !important;
  box-shadow: 1px 0px 1px #10374b, 0px 1px 1px #1f4e66, 2px 1px 1px #10374b, 1px 2px 1px #1f4e66, 3px 2px 1px #10374b, 2px 3px 1px #1f4e66, 4px 3px 1px #10374b, 3px 4px 1px #1f4e66, 5px 4px 1px #10374b, 4px 5px 1px #1f4e66, 6px 5px 1px #10374b !important;
  display: none
}

.f6 {
  font-size: 2.5rem;
}

#retryid {
  border: 0;
  background-color: #9c43ccdb;
  transition: 0.6s ease-in;
  bottom: 0;
  position: relative;
  top: 1rem;
  right: 2%;
  color: #ffffffeb;
}

#retryid {
  text-decoration: none;
  font-size: 3rem;
  color: white;
  font-family: 'Arvo', serif;
  padding: 0 5%;
  box-shadow: 1px 0px 1px #2e134dc9, 0px 1px 1px #7a34cac9, 2px 1px 1px #2e134dc9, 1px 2px 1px #7a34cac9, 3px 2px 1px #2e134dc9, 2px 3px 1px #7a34cac9, 4px 3px 1px #2e134dc9, 3px 4px 1px #7a34cac9, 5px 4px 1px #2e134dc9, 4px 5px 1px #7a34cac9, 6px 5px 1px #2e134dc9;
  background-color: #7a34cac9;
  text-transform: uppercase;
}

#retryid:hover {
  background-color: #1a5573 !important;
  transition: 0.6s ease-in !important;
  color: #ffffffeb !important;
}

.why3 {
  background-color: #7a3fbd !important;
  box-shadow: 1px 0px 1px #4c1e80, 0px 1px 1px #642ca5, 2px 1px 1px #4c1e80, 1px 2px 1px #642ca5, 3px 2px 1px #4c1e80, 2px 3px 1px #642ca5, 4px 3px 1px #4c1e80, 3px 4px 1px #1f4e66, 5px 4px 1px #4c1e80, 4px 5px 1px #642ca5, 6px 5px 1px #4c1e80 !important;
}

.why3:hover {
  background-color: #581d9b !important;
  transition: 0.6s ease-in !important;
  color: #ffffffeb !important;
}

#score2,
f7 {
  font-size: 2rem !important;
  display: block !important;
}

#tittle6 {
  position: relative;
  top: 4%;
  display: block;
  color: white;
  text-shadow: 3px 4px 2px #00000082;
}

.escondido {
  display: none;
  border: 1px solid #2d97cb;
  background-color: #f9f9f9;
  height: 2rem;
  text-align: center;
  position: absolute;
  margin: auto;
  margin-top: 2%;
}

#Result {
  display: none;
  background-color: #6ab1d4;
  border: 0;
}

#resultbody {
  background-color: #4ea4ce;
  text-align: center;
}

.mes {
  color: white;
  font-size: 4rem;
  margin-bottom: 5%;
  text-align: center;
  margin: 0;
  font-family: 'Arvo', serif;
  text-transform: uppercase;
  text-shadow: 3px 4px 2px #00000082;
}

.mes:first-child {
  color: white;
  font-size: 4rem;
  margin-bottom: 5% !important;
  text-align: center;
  margin: 0;
  font-family: 'Arvo', serif;
  text-transform: uppercase;
  text-shadow: 3px 4px 2px #00000082;
}

.mess {
  font-size: 2rem;
  text-shadow: 3px 4px 2px #00000082;
  text-shadow: 0px 2px 0px #00000082;
  margin-bottom: 1%;
  text-transform: capitalize !important;
}

#retryid2 {
  text-decoration: none;
  font-size: 3rem;
  color: white;
  font-family: 'Arvo', serif;
  padding: 0 5%;
  box-shadow: 1px 0px 1px #2e134dc9, 0px 1px 1px #7a34cac9, 2px 1px 1px #2e134dc9, 1px 2px 1px #7a34cac9, 3px 2px 1px #2e134dc9, 2px 3px 1px #7a34cac9, 4px 3px 1px #2e134dc9, 3px 4px 1px #7a34cac9, 5px 4px 1px #2e134dc9, 4px 5px 1px #7a34cac9, 6px 5px 1px #2e134dc9;
  border: 0;
  display: inline-block !important;
  background-color: #7a34cac9;
  text-transform: uppercase;
}

#retryid2:hover {
  background-color: #1a5573 !important;
  transition: 0.6s ease-in !important;
  border: 0;
  font-family: 'Arvo', serif;
  color: #ffffffeb !important;
}

body {
  height: 100%;
}

.atr234 {
  font-size: 2rem;
  text-shadow: 3px 4px 2px #00000082;
  text-shadow: 0px 2px 0px #00000082;
  margin-bottom: 10%;
}

#formresults {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="background">
  <h1 id="tittle" class="f1">Test</h1>
  <div id="atr">
    <h1 id="tittle2" class="f1 f2">math</h1>
  </div>
  <div id="atr" class="ahke">
    <button id="buttonstart">
        <a id="why" class="why2" href="#">Start</a>
      </button>

    <div id="mathbox">
      <div id="operaciones">
        <div id="atr54">

          <div class="op" id="num1"></div>

          <div class="op" id="operador"></div>
          <div class="op" id="num2"></div>
        </div>

      </div>
      <input id="resultado" type="number" placeholder="Answer">

error on math game made with js and jquery? infinite loop

2 Answers2