Javascript：接受用戶輸入

Question

我已經為我的HTML文檔明確定義了一個Javascript文件。 在我的HTML中，我創建了一個文本框，用戶可以在其中輸入名稱，然后單擊名為“提交”的按鈕。

在JS中，當他們單擊“提交”時，我想將他們輸入的名稱存儲在變量中（我使用eventListener知道他們何時單擊“提交”）。 我的問題是，如何在不使用HTML文檔中使用onclick的情況下做到這一點？ 這是我目前的以下代碼：

my_button.addEventListener('click', my_function);

function my_function(){
   alert("Hello world!"); 
}

Answer 1

一種方法是使用oninput事件，並且每次用戶鍵入內容時，都會更新要在其中存儲輸入的變量。 輸入標記如下所示： <input type="text" oninput="myFunction()">並且在聲明為處理函數的函數中，您可以獲取輸入並存儲在所需的任何位置。

Answer 2

您可以將代碼分開。 您在HTML文檔中要做的就是加載javascript文件。

這是一個片段。 首先是javascript文件的內容，然后在簡化的HTML文檔下面。

 let myButton = document.getElementById("theButton"); myButton.addEventListener('click', my_function); function my_function(){ alert("Hello world!"); }

 <button id="theButton">Test</button>

Answer 3

添加單獨的javascript文件，請在您的html中的任意位置執行此操作

<script type='text/javascript' src = 'path/filename' > </script>

Answer 4

要獲得同比的輸入值，需要先選擇它。 然后您通過value屬性獲得值。

看這個例子：

   <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input id="my_input" type="text">
<button id="my_btn">click</button>
</body>
</html>

那么您可以使用以下javascript。

var my_button = document.querySelector('#my_btn');

    var my_input = document.querySelector('#my_input');
    var value;


    my_button.addEventListener('click',function () {
      value = my_input.value;
      alert(value);
    })

希望這可以幫助！

Javascript：接受用戶輸入

問題描述

4 個解決方案

解決方案1
0 2018-11-01 22:10:10

解決方案2
0 2018-11-01 22:35:01

解決方案3
0 2018-11-01 23:00:44

解決方案4
0 2018-11-01 23:22:29

Javascript：接受用戶輸入

問題描述

4 個解決方案

解決方案1 0 2018-11-01 22:10:10

解決方案2 0 2018-11-01 22:35:01

解決方案3 0 2018-11-01 23:00:44

解決方案4 0 2018-11-01 23:22:29

解決方案1
0 2018-11-01 22:10:10

解決方案2
0 2018-11-01 22:35:01

解決方案3
0 2018-11-01 23:00:44

解決方案4
0 2018-11-01 23:22:29