Html 按钮而不是提示答案

【问题标题】：Html buttons instead of promptHtml 按钮而不是提示
【发布时间】：2013-10-31 21:05:26
【问题描述】：

在这种情况下，我想使用两个 div 按钮而不是 om prompt()。那可能吗？我尝试过使用函数，但我没有从函数中获得值。这是我的一些代码。

var gaming = true

var number = Math.floor(Math.random() * 52) + 1;
var nextnumber = Math.floor(Math.random() * 52) + 1;
var rounds = 1
console.log(number)
console.log(nextnumber)


while(gaming) {
var guess = prompt(More or less?");

if (guess === "more") {
    if (number <= nextnumber) {

对不起，我的英语不好！

【问题讨论】：

标签： javascript function prompt

【解决方案1】：

这是一个非常广泛的话题，我真的不应该接近它。不过我还是会的。

您以前版本的程序基本上是一个控制台应用程序。这一切都是同步的，在继续之前等待用户输入。

很遗憾，网页或网络应用程序并非如此。就其价值而言，这也不是基于 Windows UI 的应用程序的工作方式。添加 UI 后，您就进入了事件驱动的逻辑流。任何事件都可能在任何时候发生，你必须能够处理它。

除此之外，还有你的大量研究和实验，我能帮助你的唯一方法就是用勺子喂你一点。这是一个可以帮助您入门的示例。它不漂亮，而且有一些错误，但它会让你了解如何进行异步编程。

HTML

<textarea id="console" style="height: 400px; width: 600px}"></textarea>
<div id="more">More</div>
<div id="less">Less</div>

JavaScript

var failed = false;
var number;
var nextNumber = Math.floor(Math.random() * 52) + 1;
var rounds = 1;

function newRound() {
    number = nextNumber;
    nextNumber = Math.floor(Math.random() * 52) + 1;
    document.getElementById("console").innerHTML += "\nYou are in round " + rounds + ". The current number is: " + number + ". Guess More or Less.";
}

function checkFailed() {
    if (failed) {
        var ans = prompt("You lost.  Try again?");
        if (ans == "Yes") {
            rounds = 1;
            document.getElementById("console").innerHTML = "";
           failed = false;
            newRound();
        }
    } 
}

document.getElementById("more").onclick = function() {
    checkFailed();
    if (nextNumber >= number) {
        document.getElementById("console").innerHTML += "\nGood guess!  The next number was " + nextNumber;
        ++rounds;
        newRound();
    } else {
        document.getElementById("console").innerHTML += "\nSorry, you failed.  The next number was " + nextNumber;
        failed = true;
    }
};

document.getElementById("less").onclick = function() {
    checkFailed();
    if (nextNumber <= number) {
        document.getElementById("console").innerHTML += "\nGood guess!  The next number was " + nextNumber;
        ++rounds;
        newRound();
    } else {
        document.getElementById("console").innerHTML += "\nSorry, you failed.  The next number was " + nextNumber;
        failed = true;
    }
};

newRound();

你可以玩HERE

需要注意的几点：

除了第一个newRound之外的所有游戏都是由用户发起的。用户必须点击才能进行游戏。
其中一些与您之前所做的类似 - 声明变量并设置它们。但游戏逻辑已移至按钮处理程序中。
我们必须处理用户在丢失后点击按钮的情况。（有比我向您展示的方式更好的方法。
我们不能假设有一个控制台，所以我们伪造了我们自己的。
我们充分利用函数 - 不仅用于回调，还用于执行日常任务。
通过查找感兴趣的元素并为其事件设置处理程序来注册回调。您可以注册很多events。
回调实际上可以是更复杂的带参数的函数，但对于这段代码来说不是必需的。

【讨论】：