javascript - 循环中的 prompt() 从不显示 writeln() 内容

Question

我是 javascript 的新手，在完成这项作业时遇到了问题。我的教授建议问题是由于需要 parseInt，但即使在我添加了 parseInt 之后，它仍然无法正常工作。

这在 Firefox 中显示正常，并显示“higher”和“lower”语句，但是当我在 Chrome 或 Edge 中运行它时，只会呈现要求数字的窗口。我确实寻求帮助，但我看不出我做错了什么。我在网上看到的大多数建议都没有直接解决代码问题。这个问题是与特定代码相关还是其他原因？

function play() {

  let guess;
  let randNum = Math.floor(1 + Math.random() * 999);
  let guessed = false;

  while (guessed == false) {
    guess = window.prompt("Enter a number from 1 to 1000");
    parseInt(guess);
    if (guess == randNum) {
      document.writeln("<li>" + "Congratulations! You guessed the correct number!</li>");
      guessed = true;
      document.writeln("</ol>");
      document.writeln("Your guess: " + guess);
      document.writeln("Actual number: " + randNum);
    } else if (guess > randNum) {
      document.writeln("<li>" + guess + " is Too High. Try Again.</li>");
      document.writeln("</ol>");
    } else if (guess < randNum) {
      document.writeln("<li>" + guess + " is Too Low. Try Again.</li>");
      document.writeln("</ol>");
    }
  }

}

window.addEventListener("load", play, false);

Answer 1

• 不要使用writeln。使用适当的方法，如 .append()或 .insertAdjacentElement()或 .insertAdjacentHTML()如果您只想插入 HTML 字符串而不是节点。
• 不要使用 alert、prompt 等。这些 Window 方法很可能会在不久的将来被弃用或至少不被推荐。
• 记住，对变量使用let，对常量使用const。
• 使用像 Element.querySelector() 这样的 DOM 方法获取和存储 DOM Element ,
• 使用Document.createElement()创建一个新的(在你的情况下是一个新的 LI 元素)

为了简化查询或创建所需的 DOM 元素——创建两个可重用的函数:

// DOM utility functions:

const find   = (selector, parent) => (parent || document).querySelector(selector);
const create = (tag, properties) => Object.assign(document.createElement(tag), properties);

可用于缓存您的元素并稍后在您的游戏逻辑中使用它们

// Cache your DOM elements!
const elNumber  = find("#number"); 
const elCheck   = find("#check");
const elAnswers = find("#answers");

它将通过 id 属性选择器定位并缓存您的三个 HTML 元素。如上所述，不要使用 prompt，而是在您的 App 中使用更好、侵入性更小的 UI(用户界面):

Enter a number from 1 to 10: <input id="number" type="text">
<button id="check" type="button">CHECK</button>
<ol id="answers"></ol>

然后为猜测状态创建两个 let 变量，为随机数创建一个变量，这样当您开始新游戏时您可以更改它们的值:

// Make available for multiple games!
let numRand;
let isGuessed;

然后，根据您的特定游戏，您还需要两个函数，一个用于启动(和重新启动)游戏，一个用于您的游戏逻辑:

// Call this function to start a new game!
const start = () => {
  // Clear old answers
  // Reset old guessed state
  // Generate a new random number
};

// Call this function on button CHECK click!
const check = () => {
  // Game logic goes here!
}

// Assign listener to button:
elCheck.addEventListener("click", check);

// Start a new game!
start(); 

演示时间:

// DOM utility functions:

const find   = (selector, parent) => (parent || document).querySelector(selector);
const create = (tag, properties) => Object.assign(document.createElement(tag), properties);

// Task:

// Cache your DOM elements!
const elNumber  = find("#number"); // PS: remember, use const for constants!
const elCheck   = find("#check");
const elAnswers = find("#answers");

// Make available for multiple games!
let numRand;
let isGuessed; // Try to prefix boolean variables with "is*"


// Call this function to start a new game!
const start = () => {
  // Clear old answers:
  elAnswers.innerHTML = "";

  // Reset old guessed state
  isGuessed = false;

  // Generate a new random number 1 to 10:
  numRand = Math.floor(Math.random() * 9) + 1;
};


// Call this function on button CHECK click!
const check = () => {

  // Start a new game if needed
  if (isGuessed) start();

  // Get the user entered value
  // Use parseInt with radix 10 and Math.abs
  // to prevent negative numbers
  const numUser = Math.abs(parseInt(elNumber.value, 10)); 

  // Do nothing if invalid value entered:
  if (!numUser) return;

  // Update isGuessed state
  isGuessed = numRand === numUser;

  // Handle answer:
  const textAnswer = `
    You guessed: ${numUser}.
    The number is ${isGuessed ? "correct!" : numUser > numRand ? "too high." : "too low."}
    ${isGuessed ? "Congratulations!" : "Try again"}
  `;

  // Create a LI element with the answer text
  const elAnswer = create("li", {
    textContent: textAnswer
  });

  // Append your LI element!
  elAnswers.append(elAnswer);

  // Clear the current value from input:
  elNumber.value = "";
};


// Assign listener to button:
elCheck.addEventListener("click", check);

// Start a new game!
start();

Enter a number from 1 to 10: <input id="number" type="text">
<button id="check" type="button">CHECK</button>
<ol id="answers"></ol>

其他学习资源:

• Arrow_functions (MDN)
• Template literals /Template strings (MDN)
• Conditional (ternary) operator (MDN)