如何使JavaScript函数等待输入或值？

Question

如下所示，我有一个函数createCharacter（），它调用另一个函数getUserInput（）。 此函数用于获取文本输入元素的值，并返回该值以存储在createCharacter中的“name”变量中。 但是，如果您运行此代码。 它完全贯穿两个功能，从不给用户输入值的机会。 也许更具体的问题是，如何在将函数返回到createCharacter之前使该函数等待定义变量？ 我试图将代码包装在while循环中，只要value未定义，它就会运行。 没有工作，创建了无限循环并崩溃。 任何解决这个问题的方法都将不胜感激。 我觉得解决方案很简单，但我无法理解我的生活。 谢谢。

 var messageDisplay = document.querySelector(".message-display"); var menuInput = document.querySelector(".menu-input"); var playerInput = document.querySelector(".player-text") function createCharacter() { messageDisplay.textContent = "Welcome! What is your name?"; var name = getUserInput(); messageDisplay.textContent = "Hello " + name + "!"; } function getUserInput() { var textValue = playerInput.value; return textValue; } createCharacter();

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="message-display"></div> <div class="menu-input"> <form class="menu-input-content"> <input class="player-text" type="text"> <input class="submit-button" type="submit"> </form> </div> <script type="text/javascript" src="app.js"></script> </body> </html>

Answer 1

我认为你对DOM和用户的交互方式有误解。 DOM是基于事件的。 您可以首先向输入元素（或提交按钮）添加更改事件侦听器：

menuInput.onchange = createCharacter;

然后删除对createCharacter的调用，这是您发布的代码中的最后一行。

然后，当您更改输入中的文本时，这将调用createCharacter()方法，这可能不是您想要的。 你也可以尝试：

var menuSubmit = document.querySelector(".submit-button");
menuSubmit.onclick = createCharacter;

这可能更多的是在正确的轨道上。

但是，考虑到你的误解，或许你需要重新考虑如何处理你的设计？

它立即运行代码的原因是因为最后一行。 浏览器加载JS并执行全局范围内的所有内容。 您的查询选择器将运行并存储在这些变量中，定义函数，然后在最后一行调用其中一个已定义的函数。

要解决此问题，您需要将应用重新设计为基于事件。 继续在全局范围内定义所需的变量和函数，就像在这里一样，但是然后将执行更改为响应事件。

Answer 2

我想你正在寻找这样的东西。 你应该使用这些事件来获得你想要的东西。 在用户单击“提交”按钮之前，您正在执行createCharacter（）。 因此你看到“你好！” 因为最初没有用户输入。

 function submitClicked(event) { var messageDisplay = document.querySelector(".message-display"); var playerInput = document.querySelector(".player-text"); messageDisplay.innerHTML = "Hello " + playerInput.value; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="message-display"></div> <div class="menu-input"> <input class="player-text" type="text"> <input class="submit-button" onclick="submitClicked()" type="submit"> </div> <script type="text/javascript" src="app.js"></script> </body> </html>

如何使JavaScript函数等待输入或值？

问题描述

2 个解决方案

解决方案1
3 已采纳 2018-03-28 20:55:39

解决方案2
0 2018-03-28 21:31:28

如何使JavaScript函数等待输入或值？

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-03-28 20:55:39

解决方案2 0 2018-03-28 21:31:28

解决方案1
3 已采纳 2018-03-28 20:55:39

解决方案2
0 2018-03-28 21:31:28