如何使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