title: Create a guessing game, where the computer guesses the number that the user inputs
body: <p>Given that user input should be between 1 and 1000, I'm trying to use a binary search of a (sorted) integer array of 1-1000 to output the following:</p>
  
  <p><a href="https://i.stack.imgur.com/IaDbl.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>I just want the output--ignore the formatting. Now, the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const testButton = document.getElementById("test");
  
  testButton.addEventListener('click', () =&gt; {
    myArray = new Array(1000);
    for (i = 0; i &lt; 1000; i++) {
      myArray[i] = i + 1;
      //just for visual aid, not to be actual part of final output
      document.getElementById("boop").innerHTML = myArray;
      document.getElementById("boop").innerHTML += `&lt;p&gt;${myArray[myArray.length -1]}&lt;/p&gt;`;
    }
  
  
    var userInput = parseInt(document.getElementById("input").value);
    let min = myArray[0];
    let max = myArray[myArray.length - 1];
  
    if (userInput &lt; 1 || userInput &gt; 1000) {
      document.getElementById("boop").innerHTML += "That's not between 1 and 1000.";
    } else {
  
      while (min &lt; max) {
  
        userInput = parseInt(document.getElementById("input").value);
        let min = myArray[0];
        let max = myArray[myArray.length - 1];
  
  
        let mid = myArray[myArray.length - 1];
  
        mid = parseInt(Math.floor(mid / 2));
        let count = 0;
  
        if (userInput == mid) {
          count++;
          document.getElementById("boop").innerHTML += `&lt;p&gt;Guessed ${mid} and got it. Took me ${count} tries.&lt;/p&gt;`;
        } else if (userInput &gt; mid) {
          count++;
          document.getElementById("boop").innerHTML += `&lt;p&gt;Guessed ${mid}. Too low.&lt;/p&gt;`;
          min = mid + 1;
          mid = parseInt(Math.floor(mid + (mid / 2)));
        } else {
          count++;
          document.getElementById("boop").innerHTML += `&lt;p&gt;Guessed ${mid}. Too high.&lt;/p&gt;`;
          max = mid - 1;
          mid = parseInt(Math.floor(mid / 2));
        }
      }
  
    }
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;input type="text" id="input"&gt;
    &lt;button id="test"&gt;
  Start Game
  &lt;/button&gt;
    &lt;p id="boop"&gt;
    &lt;/p&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you'd like to mess with my JSfiddle, <a href="https://jsfiddle.net/andrewcomiskey/4go9rbya/136/" rel="nofollow noreferrer">enter link description here</a></p>
  
  <p>I don't receive any console errors when running it, but it does appear to be an infinite loop because my browser hangs. I've looked through similar questions, and the most similar I can find is: <a href="https://stackoverflow.com/questions/15634562/how-to-match-the-given-output-for-java-computer-guess-your-number-game-binary-s">enter link description here</a> but it's using Java, and I haven't learned Java (still pretty new to programming in general), so it's a bit confusing, but I believe it's a similar concept.</p>
  
  <p><strong>Thank you in advance for any help you can offer!</strong></p>