Question

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

＆＃13;

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();

＆＃13;

<!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>

＆＃13;

Answer 1

我认为您对DOM和用户的交互方式存在误解。 DOM是event based。您可以首先在输入元素（或提交按钮）中添加change event listener：

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 个答案: