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>
2 answers
solution1
3 ACCPTED 2018-03-28 20:55:39
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.
solution2
0 2018-03-28 21:31:28
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.