number baseball game in javascript

Question

I was making the number baseball game with javascript.

I got the random 3 numbers in my console based on the code I wrote.

And I want to use the function play for comparing the randomIndexArray which shown by computer randomly and the user input value.

However, I could see any numbers in my console after I put the 3 numbers in the input box.

Also, I want to put numbers like 123 and show to the console in array like [1, 2, 3]

How can I solve this?

let inputNumber = document.getElementById("input-number");
let goButton = document.getElementById("go-button");
let userInput = document.getElementById("user-input")
let resultArea = document.getElementById("result-area");
let triesArea = document.getElementById("tries-area");
let gameOver = false;

goButton.addEventListener("click", play);

let randomIndexArray = [];
for (i = 0; i < 3; i++) {
  randomNum = Math.floor(Math.random() * 10);
  if (randomIndexArray.indexOf(randomNum) === -1) {
    randomIndexArray.push(randomNum)
  } else {
    i--
  }
};
console.log(randomIndexArray);

function play() {
  let userValue = userInput.value;
  let strike = 0;
  let ball = 0;

  for (let i = 0; i < randomIndexArray.length; i++) {
    let index = userValue.indexOf(randomIndexArray[i]);
    if (index > -1) {
      strike++;
    } else {
      ball++;
    }

  }

}
play();

<div>number baseball game</div>
<div id="tries-area">tries: 5times</div>
<div id="result-area">result: 1strike 1ball</div>
<input id="user-input" type="number" placeholder="input 3 numbers among 0 to 9">
<button id="go-button">Go!</button>

score 1 · Answer 1 · answered Aug 15 '23 at 10:05

Please bare with me if I got this wrong as I am not familiar with baseball. To my understanding from the brief description you provided you need the following:

User fills the input with 3 numbers separated by comma or space, ex. 1,2,3 or 1 2 3
Split the comma-separated/space-separated string into an array
Check if the random generated numbers exist in the users input and update strike or ball accordingly.

When using the type="number" attribute on an input you are expected to provide a single number. Since you need a string of separated numbers you need to set the type="text" and convert the input to an array afterwards.

You can split a string into an array easily by using the split() method. As a parameter to the split method you provide the character by which the string should be split. The character will be removed from the resulting array.

Take a look at my solution below and let me know via the comments if you need any other clarification.

let inputNumber = document.getElementById("input-number");
let goButton = document.getElementById("go-button");
let userInput = document.getElementById("user-input")
let resultArea = document.getElementById("result-area");
let triesArea = document.getElementById("tries-area");
let gameOver = false;
let strike = 0;
let ball = 0;

goButton.addEventListener("click", play);

function randomArray() {
  let randomIndexArray = [];
  
  for (i = 0; i < 3; i++) {
    randomNum = Math.floor(Math.random() * 10);
    if (randomIndexArray.indexOf(randomNum) === -1) {
      randomIndexArray.push(randomNum)
    } else {
      i--
    }
  };
  
  return randomIndexArray;
}

function play() {
  let userValue = userInput.value.split(','); // split by comma
  // let userValue = userInput.value.split(' '); // split by space
  
  let randomIndexArray = randomArray();
  
  for (let i = 0; i < randomIndexArray.length; i++) {
    let index = userValue.indexOf(String(randomIndexArray[i])); // items in userValue array are strings so we need to convert randomIndexArray[i] to a String 
    if (index > -1) {
      strike++;
    } else {
      ball++;
    }
  }
  
  console.log('randomArray', randomIndexArray)
  console.log('userValue', userValue)
  console.log('strike', strike)
  console.log('ball', ball)
}

<div>number baseball game</div>
<div id="tries-area">tries: 5times</div>
<div id="result-area">result: 1strike 1ball</div>
<input id="user-input" type="number" placeholder="input 3 numbers among 0 to 9">
<button id="go-button">Go!</button>

number baseball game in javascript

1 Answers1