How can I make a JavaScript function wait for input or value?

Question

As you can see below, I have a function,createCharacter(), that calls another function, getUserInput(). This function is intended to grab the value of a text input element and return that value to be stored in the "name" variable within the createCharacter. However, if you run this code. It completely runs through both functions, never giving the opportunity for the user to input a value. Perhaps a more specific question is, how can I make this function wait for the variable to be defined before returning it to createCharacter? I've tried to wrap the code in a while loop that will run for as long as value is undefined. Didn't work, created an infinite loop and crashed. ANY solution to this problem will be greatly appreciated. I feel like the solution is so simple, but I just can't figure it out for the life of me. Thanks.

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>

Nick · Accepted Answer · 2018-03-29 00:09:31Z

3

I think you have a misunderstanding of how the DOM and the user interact. The DOM is event based. You can start by add an change event listener to your input element (or on the submit button):

menuInput.onchange = createCharacter;

And then remove the call to createCharacter, the last line in the code you posted.

This will then call the createCharacter() method when you change the text in the input at all, which is probably not what you want. You could also try:

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

And that is probably more on the right track.

However, given your misunderstanding in the first place, perhaps you need to reconsider how you approach your design?

The reason it runs through the code immediately is because of the last line. The browser loads the JS and executes everything in the global scope. Your query selectors are run and stored in those variables, the functions defined, and then on the last line you call one of the defined functions.

To fix this you need to redesign your app to be event based. Keep defining needed variables and functions in the global scope, as you are doing here, but then change your execution to be in response to events.

edited Mar 29, 2018 at 0:09

answered Mar 28, 2018 at 20:55

Nick

5,2881 gold badge44 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ceder Over a year ago

Thank you so much! Makes perfect sense, I see exactly my flawed approach now. I knew that functions were ran during the initial creation phase. So, I should have know better. Thanks for helping a newby see the light! :)

Nick Over a year ago

@Ceder, np. I was happy to answer a well written and formatted question. Seems the last year or so all new users just post "it doesn't work".

Suman Saini · Accepted Answer · 2018-03-28 21:31:28Z

I think you are looking for something like this. You should be using the events to get what you wanted. You are executing createCharacter() before even the user clicked the Submit button. Hence you see "Hello !" as there is no user input initially.

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>

Collectives™ on Stack Overflow

How can I make a JavaScript function wait for input or value?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related