如何在 JavaScript 和 HTML 中更改对输入框的提示响应

How to change prompt responses to input boxes in JavaScript and HTML

本文关键字：输入 响应 提示 JavaScript HTML      更新时间：2023-09-26
                         Long Detailed Question

我在下面放了一部分代码。这是我正在开发的一个小JavaScript游戏。当游戏想要了解某些内容或从用户那里获取文本输入时，我会使用 prompt 命令，您可能知道它会弹出一个警报框，显示一些文本并让用户提交文本响应。我想知道如何更改它，因此屏幕上没有弹出一个警报框，而只是一个输入框，可以接受他们的文本响应。我认为所需的代码要么是JQuery(我没有太多经验(要么是JavaScript。

                          Short Summarized Question

因此，总而言之，我想知道如何制作一个输入框，该输入框接受类似于提示警报的文本输入<<<

                                    Code
var finishAnt = prompt(
                 "you can either risk your life and finish him, or try to run away. Do you finish him?").toLowerCase()
             if (finishAnt == "yes") {
                 console.log("congratulations you have killed the aint eater!")
             } else if (finishAnt == "no") {
                 console.log(
                     "You run away and barley make it, you are badly hurt");
             } else {
                 console.log("sorry thats not an option")
             }
         } else if (meetAnt == "no") {
             console.log(
                 "You run past the ant eater and get to saftey. You are very lucky")
         } else {
             console.log("Sorry that is not an option.")
         }

你可以使用 Jquery 来做到这一点，或者你可以使用 document.getElementsByTagName('input').value ，将其分配给一个变量，并采取相应的行动。就像如果用户对第一个选择"是"一样，输入框的值将设置为布尔值：true或字符串：yes。然后获取这些值并根据结果显示一条消息。

无法直接翻译此代码。您需要对代码进行一些重大更改以支持它。

alert()、prompt()和confirm() Javascript 函数的独特之处在于它们阻止脚本的执行，直到对话框被关闭。基本上，Javascript中的所有其他方法，包括允许您操作和响应HTML页面中事件的DOM方法，都是非阻塞的 - 也就是说，它们必须立即执行，并且不能等待事件发生。

若要重新编写此代码以在页面中运行，需要将其重新表述为状态机。这将需要跟踪游戏在任何给定点所处的状态，并根据该状态对事件做出适当的响应。例如，您可以将游戏的一部分编写为：

var state;
function print(msg) {
  document.getElementById("output").innerText = msg;
}
function takeInput() {
  var input = document.getElementById("input").value;
  if (state == "which-door") {
    if (input == "left") {
      print("You open the left door and fall into a bottomless pit. What now?");
      state = "bottomless-pit";
    } else if(input == "right") {
      print("You open the right door and find yourself lost outdoors...");
      state = "outdoors";
    } else {
      print("That isn't a door. Which door do you open?");
      state = "which-door";
    }
  } else if (state == "bottomless-pit") {
    print("You're still falling down a bottomless pit...");
    state = "bottomless-pit";
  } else if (state == "outdoors") {
    print("Now you're back at those two doors again. Left or right?");
    state = "which-door";
  }
  // ... etc ...
});
// Make the "go" element call the takeInput() method when clicked
document.getElementById("go").addEventListener("click", takeInput);
// Start out in the "which-door" state and display an introduction:
state = "which-door";
print("Do you open the left door or the right door?");
<div id="output"></div>
<div>
  <input id="input" size="40">
  <button id="go">Go</button>
</div>

看到此代码的基本框架了吗？在每一步中，您都要考虑当前状态和输入，并使用这些来决定如何响应(通常通过调用print()(以及下一步要进入的状态。

(请注意，此结构意味着在游戏中引入逻辑循环要容易得多，因为不再需要将它们表示为控制结构。例如，此示例中的"无底洞"状态循环回自身，"室外"状态循环回"哪个门"状态。

我不认为你可以修改JS预设，但你可以在Visual Basic(TEXT/VBSCRIPT(中制作它们的模型。

尝试使用 CSS 制作一个假的弹出窗口。这将使它看起来真实。或者嵌入 PNG。但请注意。嵌入 PNG 可能会导致用户拖动它并发现它是假的。尝试使用 Animate.CSS 让它以 Windows 方式弹出。

相关文章：