Question

我正在学习Javascript，并且我试图猜测“游戏”的数量很少，我想你可以称之为。出现提示，询问您的电话号码是多少。该输入将存储在变量中，然后您可以生成一个随机数。

我想这样做，如果您的猜测等于随机生成的数字，则控制台会记录一条消息。

HTML

<div class="random-wrapper">
    <div class="random-content">
        <h1>Random Number Generator</h1>
        <p>Generate a random number between <span id="num1"></span>and <span id="num2"></span></p>
        <button id="generate" onclick="generateNumber();">Generate</button>
        <h2>Your random number is: <span id="result"></span></h2>
    </div>
</div>

JS：

let guess = prompt("What is your guess?");
let num1 = document.getElementById("num1");
let num2 = document.getElementById("num2");
let result = document.getElementById("result");

num1 = 1;
num2 = 10;
result.innerText = 0;

function generateNumber() {
    result.innerText = (Math.floor(Math.random() * num2) +1 );
    console.log(result);

    if (result == guess) {
        console.log("Your guess was correct!")
    };
}

Answer 1

这样的结果是否必要？另外，我添加了匹配数:)该行是匹配数。

let guess = prompt("What is your guess?");
let num1 = document.getElementById("num1");
let num2 = document.getElementById("num2");
let result = document.getElementById("result");
let result_matches = document.getElementById("matches");

num1 = 1;
num2 = 10;
result.innerText = 0;
number_matches = 0;

function generateNumber() {
    random_number = (Math.floor(Math.random() * num2) +1 );
    result.innerText = random_number;
    result_matches.innerText = number_matches;

    if (random_number == guess) {
        number_matches++;
        console.log(result.innerText + " --- " + "Your guess was correct!")
    } else {
        console.log(result.innerText);
    }
}

<div class="random-wrapper">
    <div class="random-content">
        <h1>Random Number Generator</h1>
        <p>Generate a random number between <span id="num1"></span>and <span id="num2"></span></p>
        <button id="generate" onclick="generateNumber();">Generate</button>
        <h2>Your random number is: <span id="result"></span></h2>
        <h2>Number of matches: <span id="matches"></span></h2>
    </div>
</div>

Answer 2

这是一个演示

const stringToIntegerNumber = (inputString) => {
  if(inputString == null) return;

  const number = Number.parseInt(inputString, 10);
  if(!Number.isInteger(number)) return;

  return number;
};

const promptIntegerStringTemplate = ({min, max} = {}) => {
  const existMinMax = min != null && max != null;
  
  const promptString = [
    'Enter a integer',
    ` [${min}-${max}]`,
    ': '
  ];

  return existMinMax ? promptString.join('') : promptString[0] + promptString[2];
}

const askIntegerNumber = ({min, max} = {}) => {
  let number, input;

  const promptString = promptIntegerStringTemplate({min, max});
  do {
    input = prompt(promptString);
    number = stringToIntegerNumber(input);
  } while(number == null);

  return number;
};

const isValidIntegerNumberInRange = (number, min, max) => {
  if(number == null || min == null || max == null
     || ( !Number.isInteger(number) )
     || ( !Number.isInteger(min) )
     || ( !Number.isInteger(max) )
    ) return;

  return number >= min && number <= max;
};

const generateRandomIntegerNumber = ({min = 0, max = 10} = {}) => {
  if( ( !Number.isInteger(min) )
     || ( !Number.isInteger(max) ) ) return;

  return min + Math.floor(Math.random() * max);
};

const makeGuess = (min, max) => {
  let guess, validatedNumber;
  do {
    guess = askIntegerNumber({min, max});
    validatedNumber = isValidIntegerNumberInRange(guess, min, max) ? guess: null;
  } while(validatedNumber == null);

  return validatedNumber;
};

const updateNumber = (min, max) => {
  const num1 = document.querySelector('#num1');
  const num2 = document.querySelector('#num2');

  num1.textContent = min;
  num2.textContent = max;
};

const playGame = (min, max, randomInteger) => {
  const guess = makeGuess(min, max);
  if(guess === randomInteger)
    console.log(`Guess ${guess} is correct.`);
  else 
    console.log(`Guess ${guess} is incorrect.\nCorrect answer is ${randomInteger}`);
    
  //Visuals
  const result = document.querySelector('#result');
  result.textContent = randomInteger;
}

const domainControler = () => {
  const [min, max] = [1, 10];
  const randomInteger = generateRandomIntegerNumber({min, max});

  //Visuals
  updateNumber(min, max);

    //Play
  setTimeout(() => playGame(min, max, randomInteger), 5);
  
};

const setup = () => {
  const generate = document.querySelector('#generate');
  generate.addEventListener('click', domainControler);
};

window.addEventListener('load', setup);

<div class="random-wrapper">
    <div class="random-content">
        <h1>Random Number Generator</h1>
        <p>Generate a random number between <span id="num1"></span>and <span id="num2"></span></p>
        <button id="generate">Generate</button>
        <h2>Your random number is: <span id="result"></span></h2>
    </div>
</div>

猜一个随机数

2 个答案: