I keep getting array not defined as an error when I am trying to push guesses into an array

I am trying to push the correct guess into an array and print out how many guesses it took (in this case one, cause I'm just inputting the correct one) and then printing out what that guess was, but I am continually getting array not defined.

<!-- language: lang-js -->

var guesses = [];

function do_guess() {
  let guess = Number(document.getElementById("guess").value);
  let message = document.getElementById("message");
  if (guess == num) {
    guesses.push(guess)
    numguesses = array.length(guesses)
    message.innerHTML = "You got it! It took you " + numguesses + " tries and your guesses were " + guesses;
  }

Problem is the way you try to count the number of guesses.

array.length(guesses)

Is not valid Javascript syntax.

What happens is, the runtime thinks "array" must be something you forgot to define, since you try to call "length(guesses)" on it.

Instead you should use the inbuilt property .lengthon guesses which is present on any array.

The correct way of getting the number of elements inside an array in js :

arrayInstance.length

In your case it would be

 guesses.length

Read more here

In the example below, a Set is used to store all failed guesses and custom validation is included as well.

Details are commented in example

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// <form id="game">
const F = document.forms.game;
// All form controls: <input>, <button>, <output>, and <fieldset>
const fc = F.elements;
// Status Area
const Range = fc.range;
const Tries = fc.tries;
const Reset = fc.reset;
// Range Area
const RSet = fc.rngSet;
const MIN = fc.min;
const MAX = fc.max;
const SET = fc.set;
// Try Area
const TSet = fc.trySet;
const TRY = fc.try;
// <label class="error">
const msg = document.querySelector(".error");
// Define mystery number
let N = 0;
// Define a Set to store tries
let attempts = new Set();
// Register "click" event to <button id="set">
SET.onclick = setRange;
// Event handler passes Event Object by default
function setRange(event) {
// Convert value of <input id="min"> to a number
let min = parseInt(MIN.value);
// Convert value of <input id="max"> to a number
let max = parseInt(MAX.value);
// Conditions to establish parameters
if (min < 1 || !min) {
min = 1;
MIN.value = min;
}
if (max < 1 || !max) {
max = 1;
MAX.value = max;
}
if (min > max) {
MIN.value = max;
MAX.value = min;
min = parseInt(MIN.value);
max = parseInt(MAX.value);
}
if (min === max) {
max = max + 1;
MAX.value = max;
}
// Display range of numbers
Range.value = `Range: ${min} to ${max}`;
// Disable Range Area
RSet.disabled = true;
// Enable Try Area
TSet.disabled = false;
// Set range values for <input id="try">
TRY.min = min;
TRY.max = max;
// Determine a random number within the range
N = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(N)
}
// Register "submit" event on <form>
F.onsubmit = tryNumber;
function tryNumber(event) {
// Stop <form> from redirecting
event.preventDefault();
// Convert values of <input id="try"> to numbers
let min = parseInt(TRY.min);
let max = parseInt(TRY.max);
let guess = parseInt(TRY.value);
// Ternary expresssion to define all possible error messages
let invalid = attempts.has(guess) ? `${guess} has already been tried` :
guess < min ? `Must be greater than ${min - 1}` :
guess > max ? `Must be less than ${max + 1}` :
isNaN(guess) ? `Must be a positive integer.` : ``;
/**
* If "invalid" is false...
* ...add "guess" to Set attempts...
* ...remove className "show" from 'msg'...
* ...romove the value from 'msg' data-msg attribute...
*/
if (!invalid) {
attempts.add(guess);
msg.classList.remove("show");
msg.dataset.msg = "";
/**
* ...otherwise...
* ...add className "show" to 'msg'...
* ...and assign the invalid message to 'msg' data-msg attribute.
*/
} else {
msg.classList.add("show");
msg.dataset.msg = invalid;
}
// Display the current number of tries
Tries.value = `Tries: ${attempts.size}`;
// Clear <input id="try">
TRY.value = "";
/**
* If "guess" equals "N"...
* ...display message in <output id="tries">...
* ...disable Try Area...
* ...show the <button id="reset">
*/
if (guess === N) {
Tries.value = `${N} was guessed correctly in ${attempts.size} tries!`;
TSet.disabled = true;
Reset.style.display = "flex";
}
}
// Register "focus" event to <input id="try">
TRY.onfocus = function() {
/**
* Remove className "show" form 'msg' as soon as the user 
* selects 'TRY'.
*/
msg.classList.remove("show");
}
// Register "reset" event to <form>
F.onreset = resetGame;
// Resets the <form>
function resetGame(event) {
// Enable Range Area
RSet.disabled = false;
// Hide <button id="reset">
Reset.style.display = "none";
// Clear Set attempts
attempts.clear();
}

<!-- language: lang-css -->

@keyframes fade {
from {
opacity: 0.0;
}
to {
opacity: 1.0;
}
}
:root {
font: 2ch/1.15 "Segoe UI";
}
form>fieldset {
padding-bottom: 20px;
}
fieldset fieldset {
margin: 0;
padding: 0;
border: 0;
}
input,
button {
font: inherit;
height: 3.5ex;
margin-top: 12px;
}
input {
width: 6ch;
text-align: center
}
button {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 17px 10px;
font-variant: small-caps;
cursor: pointer;
}
#reset {
display: none;
}
[disabled] {
opacity: 0.4;
}
.error {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
top: 5px;
opacity: 0.0;
}
.error::before {
content: attr(data-msg);
width: max-content;
padding: 5px 7px;
border-radius: 4px;
color: gold;
background: #444;
}
.show {
animation: fade 3s forwards;
}
.as-console-row::after {
width: 0;
font-size: 0;
}
.as-console-row-code {
width: 100%;
word-break: break-word;
}
.as-console-wrapper {
max-height: 20vh;
max-width: 20%;
margin-left: 80%;
}

<!-- language: lang-html -->

<form id="game" novalidate>
<fieldset>
<legend>
<!-- Status Area -->
<output id="range"> </output><br>
<output id="tries"> </output>
<button id="reset" type="reset">Play Again</button>
</legend>
<!-- Range Area -->
<fieldset id="rngSet">
<label>Min: 
<input id="min" min="1" type="number"> 
</label>
<label>Max: 
<input id="max" min="2" type="number">
</label>  
<button id="set" type="button">Set Range</button>
</fieldset>
<!-- Try Area -->
<fieldset id="trySet" disabled>
<label>Your guess:  
<input id="try" type="number" min="" max="">
</label> 
<button type="submit">Guess</button>
<label for="try" class="error" data-msg></label>
</fieldset>
</fieldset>
</form>

<!-- end snippet -->